/**
 * Trumbowyg v2.31.0 - A lightweight WYSIWYG editor
 * Default stylesheet for Trumbowyg editor
 * ------------------------
 * @link https://alex-d.github.io/Trumbowyg/
 * @license MIT
 * @author Alexandre Demode (Alex-D)
 *         Twitter : @AlexandreDemode
 *         Website : alex-d.fr
 */

#trumbowyg-icons,
.trumbowyg-icons {
  overflow: hidden;
  visibility: hidden;
  height: 0;
  width: 0;
}

.trumbowyg-box *,
.trumbowyg-box *::before,
.trumbowyg-box *::after,
.trumbowyg-modal *,
.trumbowyg-modal *::before,
.trumbowyg-modal *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.trumbowyg-box svg,
.trumbowyg-modal svg {
  width: 17px;
  height: 100%;
  color: #222;
  fill: #222;
}

.trumbowyg-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 300px;
}

.trumbowyg-editor-box {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.trumbowyg-box,
.trumbowyg-editor-box {
  position: relative;
  width: 100%;
  border: 1px solid #d7e0e2;
}

.trumbowyg-box .trumbowyg-editor {
  min-height: 100%;
  margin: 0 auto;
}

.trumbowyg-box.trumbowyg-fullscreen {
  background: #fefefe;
  border: none !important;
}

.trumbowyg-editor-box,
.trumbowyg-textarea {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px;
  width: 100%;
  border-style: none;
  resize: none;
  outline: none;
  overflow: auto;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.trumbowyg-editor-box.trumbowyg-autogrow-on-enter,
.trumbowyg-textarea.trumbowyg-autogrow-on-enter {
  -webkit-transition: height 300ms ease-out;
  transition: height 300ms ease-out;
}

.trumbowyg-editor-box {
  padding: 0;
}

.trumbowyg-editor {
  outline: none;
  padding: 20px;
}

.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before {
  color: transparent !important;
  text-shadow: 0 0 7px #333;
}
.trumbowyg-box-blur .trumbowyg-editor img,
.trumbowyg-box-blur .trumbowyg-editor hr {
  opacity: 0.2;
}

.trumbowyg-textarea {
  position: relative;
  display: block;
  overflow: auto;
  border: none;
  font-size: 14px;
  font-family: "Consolas", "Courier", "Courier New", monospace;
  line-height: 18px;
}

.trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea {
  height: 1px !important;
  width: 25%;
  min-height: 0 !important;
  padding: 0 !important;
  background: none;
  opacity: 0 !important;
}

.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-textarea {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 1px;
}
.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor-box {
  display: none;
}

.trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea {
  opacity: 0.8;
  background: none;
}

.trumbowyg-editor-box[contenteditable=true]:empty:not(:focus)::before {
  content: attr(placeholder);
  color: #999;
  pointer-events: none;
  white-space: break-spaces;
}

.trumbowyg-button-pane {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  min-height: 36px;
  background: #ecf0f1;
  border-bottom: 1px solid #d7e0e2;
  margin: 0;
  padding: 0 5px;
  position: relative;
  list-style-type: none;
  line-height: 10px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  z-index: 11;
}
.trumbowyg-button-pane::before, .trumbowyg-button-pane::after {
  content: " ";
  display: block;
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: rgb(215.4454545455, 223.7727272727, 225.8545454545);
}
.trumbowyg-button-pane::after {
  top: 71px;
}
.trumbowyg-button-pane .trumbowyg-button-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
  color: transparent;
}
.trumbowyg-button-pane .trumbowyg-button-group::after {
  content: " ";
  display: block;
  width: 1px;
  background: rgb(215.4454545455, 223.7727272727, 225.8545454545);
  margin: 0 5px;
  height: 35px;
  vertical-align: top;
}
.trumbowyg-button-pane .trumbowyg-button-group:last-child::after {
  content: none;
}
.trumbowyg-button-pane button {
  display: block;
  position: relative;
  width: 35px;
  height: 35px;
  padding: 1px 6px !important;
  margin-bottom: 1px;
  overflow: hidden;
  border: none;
  cursor: pointer;
  background: none;
  vertical-align: middle;
  -webkit-transition: background-color 150ms, opacity 150ms;
  transition: background-color 150ms, opacity 150ms;
}
.trumbowyg-button-pane button.trumbowyg-textual-button {
  width: auto;
  line-height: 35px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),
.trumbowyg-button-pane button.trumbowyg-disable, .trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before, .trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before {
  background: rgb(227.1909090909, 233.0454545455, 234.5090909091);
}
.trumbowyg-button-pane button:not(.trumbowyg-disable):hover,
.trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-button-pane button.trumbowyg-active {
  background-color: #fff;
  outline: none;
}
.trumbowyg-button-pane .trumbowyg-open-dropdown::after {
  display: block;
  content: " ";
  position: absolute;
  top: 27px;
  right: 3px;
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-top-color: #555;
}
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button {
  padding-left: 10px !important;
  padding-right: 18px !important;
}
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after {
  top: 17px;
  right: 7px;
}
.trumbowyg-button-pane .trumbowyg-right {
  margin-left: auto;
}

.trumbowyg-dropdown {
  max-width: 300px;
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: nowrap;
  border: 1px solid #d7e0e2;
  padding: 5px 0;
  border-top: none;
  background: #fff;
  color: #222;
  margin-left: -1px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px;
          box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px;
  z-index: 12;
}
.trumbowyg-dropdown button {
  display: block;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-decoration: none;
  background: #fff;
  padding: 0 20px 0 10px;
  color: #222;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}
.trumbowyg-dropdown button:hover, .trumbowyg-dropdown button:focus {
  background: #ecf0f1;
}
.trumbowyg-dropdown button svg {
  float: left;
  margin-right: 14px;
}

/* Modal box */
.trumbowyg-modal {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: 520px;
  width: 100%;
  height: 350px;
  z-index: 12;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.trumbowyg-modal-box {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: 500px;
  width: calc(100% - 20px);
  padding-bottom: 45px;
  z-index: 1;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;
          box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.trumbowyg-modal-box .trumbowyg-modal-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 20px;
  padding: 15px 0 13px;
  display: block;
  border-bottom: 1px solid #d7e0e2;
}
.trumbowyg-modal-box .trumbowyg-progress {
  width: 100%;
  height: 3px;
  position: absolute;
  top: 58px;
}
.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar {
  background: #2BC06A;
  width: 0;
  height: 100%;
  -webkit-transition: width 150ms linear;
  transition: width 150ms linear;
}
.trumbowyg-modal-box .trumbowyg-input-row {
  position: relative;
  margin: 15px 12px;
  border: 1px solid #dedede;
  overflow: hidden;
}
.trumbowyg-modal-box .trumbowyg-input-infos {
  text-align: left;
  -webkit-transition: all 150ms;
  transition: all 150ms;
  width: 150px;
  border-right: 1px solid #dedede;
  padding: 0 7px;
  background-color: rgb(250.6818181818, 251.5909090909, 251.8181818182);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.trumbowyg-modal-box .trumbowyg-input-infos label {
  color: rgb(105, 135, 142.5);
  overflow: hidden;
  height: 27px;
  line-height: 27px;
}
.trumbowyg-modal-box .trumbowyg-input-infos label, .trumbowyg-modal-box .trumbowyg-input-infos label span {
  display: block;
  height: 27px;
  line-height: 27px;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}
.trumbowyg-modal-box .trumbowyg-input-infos .trumbowyg-msg-error {
  color: #e74c3c;
}
.trumbowyg-modal-box .trumbowyg-input-html {
  padding: 1px 1px 1px 152px;
}
.trumbowyg-modal-box .trumbowyg-input-html, .trumbowyg-modal-box .trumbowyg-input-html input, .trumbowyg-modal-box .trumbowyg-input-html textarea, .trumbowyg-modal-box .trumbowyg-input-html select {
  font-size: 14px;
}
.trumbowyg-modal-box .trumbowyg-input-html input, .trumbowyg-modal-box .trumbowyg-input-html textarea, .trumbowyg-modal-box .trumbowyg-input-html select {
  -webkit-transition: all 150ms;
  transition: all 150ms;
  height: 27px;
  line-height: 27px;
  border: 0;
  width: 100%;
  padding: 0 7px;
}
.trumbowyg-modal-box .trumbowyg-input-html input:hover, .trumbowyg-modal-box .trumbowyg-input-html input:focus, .trumbowyg-modal-box .trumbowyg-input-html textarea:hover, .trumbowyg-modal-box .trumbowyg-input-html textarea:focus, .trumbowyg-modal-box .trumbowyg-input-html select:hover, .trumbowyg-modal-box .trumbowyg-input-html select:focus {
  outline: 1px solid #95a5a6;
}
.trumbowyg-modal-box .trumbowyg-input-html input:focus, .trumbowyg-modal-box .trumbowyg-input-html textarea:focus, .trumbowyg-modal-box .trumbowyg-input-html select:focus {
  background: rgb(250.6818181818, 251.5909090909, 251.8181818182);
}
.trumbowyg-modal-box .trumbowyg-input-html input[type=checkbox] {
  width: 16px;
  height: 16px;
  padding: 0;
}
.trumbowyg-modal-box .trumbowyg-input-html-with-checkbox {
  text-align: left;
  padding: 3px 1px 1px 3px;
}
.trumbowyg-modal-box .trumbowyg-input-error input, .trumbowyg-modal-box .trumbowyg-input-error select, .trumbowyg-modal-box .trumbowyg-input-error textarea {
  outline: 1px solid #e74c3c;
}
.trumbowyg-modal-box .trumbowyg-input-error .trumbowyg-input-infos label span:first-child {
  margin-top: -27px;
}
.trumbowyg-modal-box .error {
  margin-top: 25px;
  display: block;
  color: red;
}
.trumbowyg-modal-box .trumbowyg-modal-button {
  position: absolute;
  bottom: 10px;
  right: 0;
  text-decoration: none;
  color: #fff;
  display: block;
  width: 100px;
  height: 35px;
  line-height: 33px;
  margin: 0 10px;
  background-color: #333;
  border: none;
  cursor: pointer;
  font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif;
  font-size: 16px;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit {
  right: 110px;
  background: rgb(43.1848, 191.5152, 106.0844);
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus {
  background: rgb(63.648, 211.852, 126.494);
  outline: none;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active {
  background: rgb(36.616, 162.384, 89.948);
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset {
  color: #555;
  background: rgb(230.35, 230.35, 230.35);
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus {
  background: rgb(250.75, 250.75, 250.75);
  outline: none;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active {
  background: rgb(212.5, 212.5, 212.5);
}

.trumbowyg-overlay {
  position: absolute;
  background-color: hsla(0, 0%, 100%, 0.5);
  height: 100%;
  width: 100%;
  left: 0;
  display: none;
  top: 0;
  z-index: 10;
}

/**
 * Fullscreen
 */
body.trumbowyg-body-fullscreen {
  overflow: hidden;
}

.trumbowyg-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 99999;
}
.trumbowyg-fullscreen.trumbowyg-box,
.trumbowyg-fullscreen .trumbowyg-editor-box {
  border: none;
}
.trumbowyg-fullscreen .trumbowyg-editor-box,
.trumbowyg-fullscreen .trumbowyg-textarea {
  height: auto !important;
  overflow: auto;
}
.trumbowyg-fullscreen .trumbowyg-overlay {
  height: 100% !important;
}
.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
  color: #222;
  fill: transparent;
}

.trumbowyg-editor {
  /*
   * For resetCss option
   */
}
.trumbowyg-editor object,
.trumbowyg-editor embed,
.trumbowyg-editor video,
.trumbowyg-editor img {
  max-width: 100%;
}
.trumbowyg-editor video,
.trumbowyg-editor img {
  height: auto;
}
.trumbowyg-editor img {
  cursor: move;
}
.trumbowyg-editor canvas:focus {
  outline: none;
}
.trumbowyg-editor.trumbowyg-reset-css {
  background: #fefefe !important;
  font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45em !important;
  color: #333 !important;
  font-weight: normal !important;
}
.trumbowyg-editor.trumbowyg-reset-css a {
  color: #15c !important;
  text-decoration: underline !important;
}
.trumbowyg-editor.trumbowyg-reset-css div,
.trumbowyg-editor.trumbowyg-reset-css p,
.trumbowyg-editor.trumbowyg-reset-css ul,
.trumbowyg-editor.trumbowyg-reset-css ol,
.trumbowyg-editor.trumbowyg-reset-css blockquote {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  background: none !important;
  margin: 0 !important;
  margin-bottom: 15px !important;
  line-height: 1.4em !important;
  font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
  font-size: 14px !important;
  border: none !important;
}
.trumbowyg-editor.trumbowyg-reset-css iframe,
.trumbowyg-editor.trumbowyg-reset-css object,
.trumbowyg-editor.trumbowyg-reset-css hr {
  margin-bottom: 15px !important;
}
.trumbowyg-editor.trumbowyg-reset-css blockquote {
  margin-left: 32px !important;
  font-style: italic !important;
  color: #555 !important;
}
.trumbowyg-editor.trumbowyg-reset-css ul {
  list-style: disc !important;
}
.trumbowyg-editor.trumbowyg-reset-css ol {
  list-style: decimal !important;
}
.trumbowyg-editor.trumbowyg-reset-css ul,
.trumbowyg-editor.trumbowyg-reset-css ol {
  padding-left: 20px !important;
}
.trumbowyg-editor.trumbowyg-reset-css ul ul,
.trumbowyg-editor.trumbowyg-reset-css ol ol,
.trumbowyg-editor.trumbowyg-reset-css ul ol,
.trumbowyg-editor.trumbowyg-reset-css ol ul {
  border: none !important;
  margin: 2px !important;
  padding: 0 !important;
  padding-left: 24px !important;
}
.trumbowyg-editor.trumbowyg-reset-css hr {
  display: block !important;
  height: 1px !important;
  border: none !important;
  border-top: 1px solid #CCC !important;
}
.trumbowyg-editor.trumbowyg-reset-css h1,
.trumbowyg-editor.trumbowyg-reset-css h2,
.trumbowyg-editor.trumbowyg-reset-css h3,
.trumbowyg-editor.trumbowyg-reset-css h4 {
  color: #111 !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: bold !important;
}
.trumbowyg-editor.trumbowyg-reset-css h1 {
  font-size: 32px !important;
  line-height: 38px !important;
  margin-bottom: 20px !important;
}
.trumbowyg-editor.trumbowyg-reset-css h2 {
  font-size: 26px !important;
  line-height: 34px !important;
  margin-bottom: 15px !important;
}
.trumbowyg-editor.trumbowyg-reset-css h3 {
  font-size: 22px !important;
  line-height: 28px !important;
  margin-bottom: 7px !important;
}
.trumbowyg-editor.trumbowyg-reset-css h4 {
  font-size: 16px !important;
  line-height: 22px !important;
  margin-bottom: 7px !important;
}

/*
 * Dark theme
 */
.trumbowyg-dark .trumbowyg-textarea {
  background: #222;
  color: #fff;
  border-color: #343434;
}
.trumbowyg-dark .trumbowyg-box {
  border: 1px solid rgb(51.85, 51.85, 51.85);
}
.trumbowyg-dark .trumbowyg-box.trumbowyg-fullscreen {
  background: #111;
}
.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
  text-shadow: 0 0 7px #ccc;
}
.trumbowyg-dark .trumbowyg-box svg {
  fill: #fff;
  color: #fff;
}
.trumbowyg-dark .trumbowyg-button-pane {
  background-color: #222;
  border-bottom-color: #343434;
}
.trumbowyg-dark .trumbowyg-button-pane::before, .trumbowyg-dark .trumbowyg-button-pane::after {
  background: rgb(51.85, 51.85, 51.85);
}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::after {
  background-color: rgb(51.85, 51.85, 51.85);
}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg {
  color: transparent;
}
.trumbowyg-dark .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::after {
  background-color: rgb(41.65, 41.65, 41.65);
}
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):hover,
.trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):focus,
.trumbowyg-dark .trumbowyg-button-pane button.trumbowyg-active {
  background-color: #333;
}
.trumbowyg-dark .trumbowyg-button-pane .trumbowyg-open-dropdown::after {
  border-top-color: #fff;
}
.trumbowyg-dark .trumbowyg-fullscreen .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg {
  color: #ecf0f1;
  fill: transparent;
}
.trumbowyg-dark .trumbowyg-dropdown {
  border-color: #343434;
  background: #333;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 3px;
          box-shadow: rgba(0, 0, 0, 0.3) 0 2px 3px;
}
.trumbowyg-dark .trumbowyg-dropdown button {
  background: #333;
  color: #fff;
}
.trumbowyg-dark .trumbowyg-dropdown button:hover, .trumbowyg-dark .trumbowyg-dropdown button:focus {
  background: #222;
}
.trumbowyg-dark .trumbowyg-modal-box {
  background-color: #333;
  color: #fff;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-title {
  border-bottom: 1px solid #555;
  color: #fff;
  background: rgb(59.5, 59.5, 59.5);
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row {
  border-color: #222;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos {
  color: #eee;
  background-color: rgb(46.75, 46.75, 46.75);
  border-right-color: #222;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos span {
  color: #eee;
  background-color: rgb(46.75, 46.75, 46.75);
  border-color: #343434;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-infos span.trumbowyg-msg-error {
  color: #e74c3c;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error input,
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error select,
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-input-row.trumbowyg-input-error textarea {
  border-color: #e74c3c;
}
.trumbowyg-dark .trumbowyg-modal-box input,
.trumbowyg-dark .trumbowyg-modal-box select,
.trumbowyg-dark .trumbowyg-modal-box textarea {
  border-color: #343434;
  color: #fff;
  background: #222;
}
.trumbowyg-dark .trumbowyg-modal-box input:hover, .trumbowyg-dark .trumbowyg-modal-box input:focus,
.trumbowyg-dark .trumbowyg-modal-box select:hover,
.trumbowyg-dark .trumbowyg-modal-box select:focus,
.trumbowyg-dark .trumbowyg-modal-box textarea:hover,
.trumbowyg-dark .trumbowyg-modal-box textarea:focus {
  border-color: rgb(97.75, 97.75, 97.75);
}
.trumbowyg-dark .trumbowyg-modal-box input:focus,
.trumbowyg-dark .trumbowyg-modal-box select:focus,
.trumbowyg-dark .trumbowyg-modal-box textarea:focus {
  background-color: rgb(46.75, 46.75, 46.75);
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit {
  background: rgb(27.232, 120.768, 66.896);
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus {
  background: rgb(36.616, 162.384, 89.948);
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active {
  background: rgb(22.54, 99.96, 55.37);
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset {
  background: #333;
  color: #ccc;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus {
  background: #444;
}
.trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active {
  background: #111;
}
.trumbowyg-dark .trumbowyg-overlay {
  background-color: rgba(15, 15, 15, 0.6);
}
/* https://github.com/Toucaan/--inch/blob/master/css/--inch.css */

/****************/
/* BASE */
/****************/
:root {
  --inch: 96px;
}

@media (resolution: 192dpi) and (-webkit-device-pixel-ratio: 2) {
  :root {
    --inch: 130px;
  }
}

/*  Test for the size of a pixel depends on the distribution of points (pixel count)
    along the physical size (i.e. spread area of points) of the glass.
    For the measure of area we are using precise `device-width` or `device-height`
    even though the CSS property has been deprecated by the w3c.

    100% vendors support `device-width` and `device-height` at the moment and the
    property will continue to be supported well into the future simply because it
    it is the only way to target/match device specifically using the natural resolve
    of the hardware.

    https://caniuse.com/#search=device-width

    There are probably other ways of achieving the above result using min()/max()
		properties but those would be empirical in nature.

		The mappings have been categorized into five zones: */

/****************/
/* DESKTOP ZONE */
/****************/

/* 13.3-inch MBP (2012) (1280 x 800). Do we need to specify device-height as well? */
@media (resolution: 96dpi) and (device-width: 1280px),
  (-webkit-device-pixel-ratio: 1) and (device-width: 1280px) {
  :root {
    --inch: 116px;
  }
}

/* 17" Retina MBP/Chrome values */
@media (resolution: 192dpi) and (device-width: 1680px),
  (-webkit-device-pixel-ratio: 2) and (device-width: 1680px) {
  :root {
    --inch: 130px;
  }
}

/* Windows 10 @100% (1366 x 768) landscape. */
@media (resolution: 96dpi) and (device-width: 1366px),
  (-webkit-device-pixel-ratio: 1) and (device-width: 1366px) {
  :root {
    --inch: 114px;
  }
}

/* Windows 10 Pro @100% (1920 x 1080px) landscape. */
@media (resolution: 96dpi) and (device-width: 1920px),
  (-webkit-device-pixel-ratio: 1) and (device-width: 1920px) {
  :root {
    --inch: 144px;
  }
}

/* Windows 10 Pro @125% (1920 x 1080px) landscape. */
@media (resolution: 120dpi) and (device-width: 1536px),
  (-webkit-device-pixel-ratio: 1) and (device-width: 1536px) {
  :root {
    --inch: 115px;
  }
}

/* 27" EIZO monitor (2560 x 1440)*/
@media (resolution: 115dpi) and (device-width: 2560px),
  (-webkit-device-pixel-ratio: 1) and (device-width: 2560px) {
  :root {
    --inch: 92px;
  }
}

/****************/
/* MOBILE ZONE */
/****************/

/* iPhone 11 Pro Max */
@media (device-width: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  :root {
    --inch: 370px;
  }
}

@media (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  :root {
    --inch: 189px;
  }
}

/* iPhone 6 */
@media (device-width: 375px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
  :root {
    --inch: 430px;
  }
}

@media (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
  :root {
    --inch: 242px;
  }
}

/****************/
/* TABLET ZONE  */
/****************/

/* ----------- iPad Pro 10.5 ----------- */
@media (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
  :root {
    --inch: 158px;
  }
}

@media (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
  :root {
    --inch: 118px;
  }
}

/*******************/
/* SMARTWATCH ZONE */
/*******************/

/* Apple Watch 5 (Women) 40mm. */
@media (device-width: 324px) and (min-device-height: 394px) and (-webkit-device-pixel-ratio: 3) {
  :root {
    --inch: 370px;
  }
}

/* Apple Watch 5 (Men) 44mm. */
@media (device-width: 368px) and (min-device-height: 448px) and (-webkit-device-pixel-ratio: 3) {
  :root {
    --inch: 370px;
  }
}

/* Moto 360 Watch */
@media (device-width: 218px) and (device-height: 281px) and (-webkit-device-pixel-ratio: 2) {
  :root {
    --inch: 227px;
  }
}

/* print */
@media print {
  :root {
    /* NOTE qac: apparently chrome only works with mm???? */
    --inch: 25.4mm;
  }
}

/*********************/
/* PROJECTOR/TV ZONE */
/*********************/

/*********************************************************/
/**		Metric System & Imperial Units of Measurement 	 	**/
/*********************************************************/

:root {
  /* Do not --inch variable here. Doing so will break the cascade. */
  --centimeters: calc(2.54 * var(--inch));
  --millimeters: calc(25.4 * var(--inch));
  --meters: calc(2.54 * var(--inch) / 100);
  --feet: calc(12 * var(--inch));
  --thou: calc(var(--inch) / 1000);
}
:root {
  --brand-amp: #ed1c24;
  --state-muted-text: #757575;
  --state-muted-bg: #eee;
  --state-muted-border: #d6d6d6;
  /* darken(adjust-hue(#eee, -10), 5%) */
  --brand-caution: #db9050;
  --state-caution-text: #8a6d3b;
  --state-caution-bg: #f9e7cd;
  --state-caution-border: #e0c2a2;
  /* darken(adjust-hue(#f9e7cd, -10), 5%) */
  --brand-inverse: #474949;
  --brand-gray: #58595b;
  --background-color: #f0f0f0;
  --text-color: #333333;
  --btn-inverse-color: #fff;
  --btn-inverse-bg: var(--brand-inverse);
  --btn-inverse-border: #333;
  --btn-muted-color: var(--state-muted-text);
  --btn-muted-bg: var(--state-muted-bg);
  --btn-muted-border: var(--state-muted-border);
  --brand-soft-danger: #ffeeee;
  --brand-soft-success: #eeffee;
  --brand-soft-primary: #eeeeff;
  --brand-soft-warning: #ffffee;
  --border-color: #e5e5e5;
  --list-group-border: #ddd;
  --list-group-bg: #fff;
  --state-warning-bg: #fcf8e3;
  --state-info-text: #31708f;
  --gray-base: #000;
  --gray-darker: color-mix(in srgb, var(--gray-base), white 13.5%);
  --gray-dark: color-mix(in srgb, var(--gray-base), white 20%);
  --gray: color-mix(in srgb, var(--gray-base), white 33.5%);
  --gray-light: color-mix(in srgb, var(--gray-base), white 46.7%);
  --gray-lighter: color-mix(in srgb, var(--gray-base), white 93.5%);
  --btn-primary-border: color-mix(in srgb, var(--btn-primary-bg), black 5%);
  --btn-success-border: color-mix(in srgb, var(--btn-success-bg), black 5%);
  --btn-info-border: color-mix(in srgb, var(--btn-info-bg), black 5%);
  --btn-warning-border: color-mix(in srgb, var(--btn-warning-bg), black 5%);
  --btn-danger-border: color-mix(in srgb, var(--btn-danger-bg), black 5%);
  --brand-primary: color-mix(in srgb, #428bca, black 6.5%);
  --brand-success: #5cb85c;
  --brand-info: #5bc0de;
  --brand-warning: #f0ad4e;
  --brand-danger: #d9534f;
  --body-bg: #fff;
  --text-color: var(--gray-dark);
  --link-color: var(--brand-primary);
  --link-hover-color: color-mix(in srgb, var(--link-color) 15%, black);
  --font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-serif: Georgia, "Times New Roman", Times, serif;
  --font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
  --font-family-base: var(--font-family-sans-serif);
  --font-size-base: 14px;
  --font-size-large: calc(var(--font-size-base) * 1.25);
  --font-size-small: calc(var(--font-size-base) * 0.85);
  --font-size-h1: calc(var(--font-size-base) * 2.6);
  --font-size-h2: calc(var(--font-size-base) * 2.15);
  --font-size-h3: calc(var(--font-size-base) * 1.7);
  --font-size-h4: calc(var(--font-size-base) * 1.25);
  --font-size-h5: var(--font-size-base);
  --font-size-h6: calc(var(--font-size-base) * 0.85);
  --line-height-base: 1.428571429;
  --line-height-computed: calc(
    (var(--font-size-base) * var(--line-height-base))
  );
  --headings-font-family: inherit;
  --headings-font-weight: 500;
  --headings-line-height: 1.1;
  --headings-color: inherit;
  --padding-base-vertical: 6px;
  --padding-base-horizontal: 12px;
  --padding-large-vertical: 10px;
  --padding-large-horizontal: 16px;
  --padding-small-vertical: 5px;
  --padding-small-horizontal: 10px;
  --padding-xs-vertical: 1px;
  --padding-xs-horizontal: 5px;
  --line-height-large: 1.3333333;
  --line-height-small: 1.5;
  --border-radius-base: 4px;
  --border-radius-large: 6px;
  --border-radius-small: 3px;
  --component-active-color: #fff;
  --component-active-bg: var(--brand-primary);
  --btn-font-weight: normal;
  --btn-default-color: #333;
  --btn-default-bg: #fff;
  --btn-default-border: #ccc;
  --btn-primary-color: #fff;
  --btn-primary-bg: var(--brand-primary);
  --btn-primary-border: color-mix(in srgb, var(--btn-primary-bg), black 5%);
  --btn-success-color: #fff;
  --btn-success-bg: var(--brand-success);
  --btn-success-border: color-mix(in srgb, var(--btn-success-bg), black 5%);
  --btn-info-color: #fff;
  --btn-info-bg: var(--brand-info);
  --btn-info-border: color-mix(in srgb, var(--btn-info-bg), black 5%);
  --btn-warning-color: #fff;
  --btn-warning-bg: var(--brand-warning);
  --btn-warning-border: color-mix(in srgb, var(--btn-warning-bg), black 5%);
  --btn-danger-color: #fff;
  --btn-danger-bg: var(--brand-danger);
  --btn-danger-border: color-mix(in srgb, var(--btn-danger-bg), black 5%);
  --btn-link-disabled-color: var(--gray-light);
  --btn-border-radius-base: var(--border-radius-base);
  --btn-border-radius-large: var(--border-radius-large);
  --btn-border-radius-small: var(--border-radius-small);
  --input-bg: #fff;
  --input-bg-disabled: var(--gray-lighter);
  --input-color: var(--gray);
  --input-border: #ccc;
  --input-border-focus: #66afe9;
  --input-color-placeholder: #999;
  --input-height-base: (
    var(--line-height-computed) + (var(--padding-base-vertical) * 2) + 2
  );
  --input-height-large: calc(
    (var(--font-size-large) * var(--line-height-large)) +
      (var(--padding-large-vertical) * 2) + 2
  );
  --input-height-small: calc(
    (var(--font-size-small) * var(--line-height-small)) +
      (var(--padding-small-vertical) * 2) + 2
  );
  --dropdown-link-active-color: var(--component-active-color);
  --dropdown-link-active-bg: var(--component-active-bg);
  --input-border-radius: var(--border-radius-base);
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.flex-flow--column {
  flex-flow: column;
}
.flex-flow--row {
  flex-flow: row wrap;
}
.flex-flow--row-nowrap {
  flex-flow: row nowrap;
}
.align-items--center {
  align-items: center;
}
.align-items--flex-start {
  align-items: flex-start;
}
.align-items--flex-end {
  align-items: flex-end;
}
.justify-content-between {
  justify-content: space-between;
}
.justify-content-around {
  justify-content: space-around;
}
.justify-content-center {
  justify-content: center;
}
.justify-content--start {
  justify-content: flex-start;
}
.justify-content--end {
  justify-content: flex-end;
}
.justify-content-evenly {
  justify-content: space-evenly;
}
.flex-direction--row-reverse {
  flex-direction: row-reverse;
}
.flex-gap--1 {
  gap: 1em;
}
.flex-gap--05 {
  gap: 0.5em;
}
.flex-gap--05 > .help-block {
  margin: 0;
  display: flex;
  align-items: center;
}
.flex-gap--025 {
  gap: 0.25em;
}
.margin-top--0 {
  margin-top: 0;
}
.btn-svg {
  padding: 0;
}
.btn-svg svg {
  width: 100%;
  height: 100%;
}
.align-items--center > .control-label {
  padding-top: 0;
  padding-bottom: 0;
}
.flex-grow {
  flex-grow: 1;
}

/* Shared address-entry State/Province + Country pair. Tom Select replaces each source select with
 * a `.ts-wrapper`, so those generated wrappers are the flex children in the enhanced state while
 * the select rule keeps the unenhanced layout equivalent. The basis defeats `.form-control`'s
 * default 100% width when both controls fit; the minimum preserves a readable control width and
 * makes flex-wrap move the second control below instead of squeezing both on narrow containers.
 * The app's root font size is 10px, so these are 160px and 130px respectively. */
.address-state-country-pair {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5em;
  width: 100%;
}

.address-state-country-pair > .ts-wrapper,
.address-state-country-pair > select.form-control {
  flex: 1 1 16rem;
  width: auto;
  min-width: 13rem;
}

@media screen and (max-width: 991px) {
  .flex-flow--column-sm {
    flex-flow: column;
  }
  .flex-flow--row-sm {
    flex-flow: row wrap;
  }
  .align-items--center--sm {
    align-items: center;
  }
}

/* Split-column flex layout: main content (first child) grows to fill, secondary
 * (CTA) stays at its content size. Stacks vertically on small screens (≤991px).
 * Used by `split_flex_div`, `panel_split_div`, and `flex_alert_div` in the
 * presenter concern; intent matches the long-standing alert pattern of
 *   <div>main</div> <button>cta</button>
 * Switched from justify-content-between → flex-grow on first-child so the
 * stacked (column) layout doesn't push the CTA to the bottom of any extra
 * vertical space the parent provides.
 */
.split-flex {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 1em;
}
.split-flex > :first-child {
  flex-grow: 1;
  min-width: 0;
}
@media screen and (max-width: 991px) {
  .split-flex {
    flex-flow: column;
  }
}
/* Overpass is loaded via Google Fonts <link> in the layout */

@font-face {
  font-family: "FinalForms Icons";
  src:
    url(https://amp.finalforms-amp.com/assets/public-assets/fonts/e4dde5db9589a735d55c8cad834ad8bd.woff2)
      format("woff2"),
    url(https://amp.finalforms-amp.com/assets/public-assets/fonts/7b04223c222c243439277204ef5ef4f9.woff)
      format("woff"),
    url(https://amp.finalforms-amp.com/assets/public-assets/fonts/470289141e840db6bdb708f5edc5d8bb.ttf)
      format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/*************************/
/** Bootstrap OVERRIDES **/
/*************************/

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
legend,
.header-font {
  font-family: "Overpass", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-optical-sizing: auto;
}

h1 {
  font-size: 3.2rem;
}

h1.main-title {
  margin-top: 0;
}

h1.main-title small {
  display: inline-block;
}

h1.main-title small .label {
  vertical-align: text-top;
}

h1.main-title small .label .glyphicon {
  vertical-align: text-top;
}

@media (max-width: 1199px) {
  h1 {
    font-size: 2.8rem;
  }
}

@media (max-width: 991px) {
  h1 {
    font-size: 2.4rem;
  }
}

h2 {
  font-size: 2.8rem;
}

@media (max-width: 1199px) {
  h2 {
    font-size: 2.2rem;
  }
}

@media (max-width: 991px) {
  h2 {
    font-size: 1.8rem;
  }
}

h3 {
  font-size: 2.4rem;
}

@media (max-width: 1199px) {
  h3 {
    font-size: 2rem;
  }
}

@media (max-width: 991px) {
  h3 {
    font-size: 1.6rem;
  }
}

th h3,
td h3 {
  margin: 5px 0 0;
}

legend {
  font-size: 2.1rem;
}

legend h2,
legend h3,
legend h4,
legend h5 {
  margin: 0;
}

@media (max-width: 1199px) {
  legend {
    font-size: 1.9rem;
  }
}

@media (max-width: 991px) {
  legend {
    font-size: 1.6rem;
  }
}

blockquote {
  font-size: 14px;
  /* disabled this style: we want to use HTML to style: */
  /* white-space: pre-line; */
  border-left-color: var(--border-color);
}

summary {
  cursor: pointer;
}

summary > * {
  display: inline-block;
}

details > summary:first-of-type {
  display: list-item;
}

.form-group__details-wrapper summary {
  margin: 1em 0;
  font-weight: bold;
  font-size: 1em;
}
.form-horizontal .form-group__details-wrapper summary {
  padding-left: 3rem;
}

/* Links */

.btn-appearance-none {
  appearance: none;
  padding-block: 0;
  padding-inline: 0;
  border: none;
  background: none;
}

a {
  transition: all 0.2s ease-out;
}

a:focus {
  outline: none;
}

a[disabled] {
  pointer-events: none;
}

.no-link-underline a {
  text-decoration: none !important;
}

.map_link {
  vertical-align: middle;
}

/* Horizonal rule */

hr {
  box-shadow: 0 1px 1px #fff;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #fff;
}

hr.spacer {
  margin: 40px 0;
}

/* Utility: the standard form-group bottom margin, for contexts that zero it (e.g. a
   .form-inline .form-group) but still need to space against the next section. */
.margin-bottom--15 {
  margin-bottom: 15px;
}

/* Utility: a section-sized top margin, for a block that butts directly against the
   preceding header/section (e.g. the group membership panel under the state-record
   showpage header, which supplies no bottom spacing of its own). */
.margin-top--30 {
  margin-top: 30px;
}

/* Checkbox Fix */

input.form-control[type="checkbox"] {
  width: 2rem;
  margin: 0px;
  cursor: pointer;
}

select.form-control {
  cursor: pointer;
  width: auto;
  max-width: 100%;
}

/* Field width utilities — presenters must not pass inline `style:` (see
 * app/presenters/AGENTS.md → "No inline styles"). Root font-size is 10px, so
 * 50rem = 500px, 45rem = 450px. Safe on `.ff-select` selects: Tom Select copies
 * the source select's classes onto its `.ts-wrapper`, so the class sizes the
 * rendered widget too (inline styles instead need the propagateWidthConstraints
 * shim in finalforms_select.js). */

.field-width--50 {
  width: 50rem;
  max-width: 100%;
}

.field-min-width--45 {
  min-width: 45rem;
  width: auto;
  max-width: 100%;
}

/* Date Mask Fix */

input[type="date"] {
  line-height: inherit;
}

input[type="number"] {
  width: 10em;
}

.form-control[autocomplete="postal-code"] {
  width: 7em;
}

.form-control[autocomplete="address-level2"] {
  width: 15em;
  flex: 1;
}

.form-control[autocomplete="address-level1"] {
  width: 5.5em;
  min-width: 5.5em;
  padding-right: 0;
  display: inline-block;
}

.form-control[autocomplete="country"] {
  width: 5.5em;
  min-width: 5.5em;
  padding-right: 0;
  display: inline-block;
}

/* Popover */

.popover {
  max-width: 30em;
}

.popover .popover-title {
  white-space: pre-line;
}

/* Popup footer */

.modal-footer {
  margin-top: 0px;
}

.modal-body__loading {
  display: flex;
  flex-flow: column;
  min-height: 18rem;
  align-items: center;
  justify-content: center;
}

.modal-body__loading svg {
  display: block;
  width: 5rem;
  height: 5rem;
  opacity: 0.5;
}

.modal-title .main-title {
  margin: 0;
}

.modal-title .sub-title {
  margin: 0.5rem 0 0 0;
}

/*************************/
/** BOOTSTRAP ADDITIONS **/
/*************************/

.background-white {
  background: white;
}

.clear {
  clear: both;
}

.sub-title {
  margin: 0 0 1rem;
}

.modal-title .sub-title {
  margin: 0.5rem 0 0 0;
  font-weight: bold;
}

.sub-title.profile-page__h6 {
  line-height: 1.5;
}

.sub-title.profile-page__h6 b {
  white-space: nowrap;
}

.sub-title.profile-page__h6 .list-inline {
  margin-bottom: 0;
}

.profile-page__cta-container {
  text-align: center;
  margin-bottom: 1rem;
}

.profile-page__title-and-contact {
  display: flex;
  flex-flow: row wrap;
  max-width: 700px;
  align-items: center;
  gap: 0.5rem;
}

.profile-page__title-and-contact > * {
  max-width: 100%;
}

/* Glyphicons */

.glyphicon.danger {
  color: #d9534f;
}

.glyphicon.success {
  color: #5cb85c;
}

.glyphicon.warning {
  color: #f0ad4e;
}

.glyphicon.info {
  color: #5bc0de;
}

.glyphicon.primary {
  color: #337ab7;
}

.glyphicon.inverse {
  color: #474949;
}

/* Text */

.text-amp {
  color: var(--brand-amp);
}

.text-normal {
  color: var(--text-color);
  font-weight: 400;
  font-style: normal;
  text-transform: none;
}

/* Fixed table layout so cell content can't stretch the table wider than its container. */
.table-fixed {
  table-layout: fixed;
  width: 100%;
}

/* Break long unbroken tokens (id lists, JSON, long emails) so they wrap instead of overflowing. */
.wrap-anywhere {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

.text-middle {
  vertical-align: middle;
}

.text-mono {
  font-family: monospace;
}

.text-pre {
  white-space: pre;
}

.text-prewrap {
  white-space: pre-line;
}

.text-lg {
  font-size: 2.4em;
}

.text-md {
  font-size: 1.6em;
}

.text-sm {
  font-size: 0.9em;
}

.text-tiny,
.text-xs {
  font-size: 0.8em;
}

.font-reset {
  font-size: 1.4rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* Leads */

.lead legend {
  font-size: 24px;
}

@media (min-width: 768px) {
  .lead {
    font-size: 1.8rem;
  }
}

.lead .text-reset {
  font-size: 1.4rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* Wells */

.well > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .well:not(.well-sm) {
    padding: 1.5rem;
  }
}

.pre-scrollable--minimal {
  max-height: 15rem;
  font-size: 1.1rem;
}

/* Code/output boxes (`.code-block` wraps a `.pre-scrollable` — ProductionScript show page): let the
   viewer drag the box taller. `resize` only writes an inline height, which `.pre-scrollable`'s
   340px max-height would keep clamping — so the second rule lifts the cap exactly once an inline
   height exists (i.e. after the first drag). Until then the box stays compact at the default. */
.code-block pre {
  resize: vertical;
}

.code-block pre[style*="height"] {
  max-height: none;
}

/* Tables */

.btn-group > .btn + form .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#content > .btn-group {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.dropdown-menu a {
  outline: none;
}

.primary-actions .dropdown-menu {
  left: auto;
  right: 0;
}

@media screen and (min-width: 768px) {
  .primary-actions.footer {
    margin-top: -65px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .container {
    width: 100%;
  }

  #content > .row:not(.content__split-view-container) {
    overflow: hidden;
  }
}

/* Alerts */

.alert.lead {
  font-size: 16px;
}

.alert > *:first-child {
  margin-top: 0;
}

.alert > *:last-child {
  margin-bottom: 0;
}

/* Carets */

.caret.caret-up {
  border-top: 4px solid transparent;
  border-bottom: 4px solid;
}

/* Badges */

#body .badge.badge--bootstrap {
  border: 1px solid currentColor;
}

#body .badge:not(.badge--bootstrap) {
  display: inline-block;
  border-radius: 4px;
  line-height: 1.3em;
  padding: 1px 4px 0;
  text-align: center;
  font-size: 10px;
  white-space: nowrap;
  top: -6px;
  margin-right: -5px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #474949;
}

#body .badge.danger {
  border-color: #d9534f;
  color: #d9534f;
  background-color: #fff;
}

#body .badge.success {
  border-color: #5cb85c;
  color: #5cb85c;
  background-color: #fff;
}

#body .badge.warning {
  border-color: #f0ad4e;
  color: #f0ad4e;
  background-color: #fff;
}

#body .badge.info {
  border-color: #5bc0de;
  color: #5bc0de;
  background-color: #fff;
}

#body .badge.primary {
  border-color: #337ab7;
  color: #337ab7;
  background-color: #fff;
}

#body .badge.inverse {
  border: none;
  background-color: #474949;
  color: #fff;
}

#body .navbar-static-top .nav .badge {
  left: 25px;
  top: 8px;
  position: absolute;
}

/* Span Labels */

.label {
  font-size: 80%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.label.label-caution {
  background-color: #f77100;
}

.label.label-caution[href]:hover,
.label.label-caution[href]:focus {
  background-color: #c45a00;
}

.label.label-inverse {
  background-color: #545656;
}

.label.label-inverse[href]:hover,
.label.label-inverse[href]:focus {
  background-color: #3b3c3c;
}

.label.label-compact {
  padding: 0.135em 0.35em 0em;
}

.label a {
  color: currentColor !important;
  text-decoration: underline;
}

a .label {
  transition: all 0.2s ease-out;
  text-decoration: none !important;
  transform: translate3d(0, 0, 0);
}

a:active .label,
a:focus .label {
  opacity: 0.6;
}

@media (hover: hover) {
  a:hover .label {
    opacity: 0.8;
  }
}

label.flex {
  cursor: pointer;
}

/* Dropdown divider labels */

.dropdown-menu li.divider-labeled {
  overflow: visible;
  margin-top: 12px;
  margin-bottom: 12px;
  position: relative;
}

span.divider-label {
  display: inline-block;
  max-width: 100%;
  margin: -20px 15px 0;
  font-size: 12px;
  color: #777;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #fff;
  padding: 0 5px;
}

.status .dropdown-menu span.divider-label {
  margin-left: 12px;
}

.dropdown-menu > li > .btn-link {
  text-align: left;
  width: 100%;
  padding: 3px 20px;
  color: var(--text-color);
  text-decoration: none;
}

.dropdown-menu > li > .btn-link:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

.dropdown-menu .hidden-xs {
  display: initial !important;
}

.status-filter-li__custom input {
  min-width: 12rem;
  margin: 2px 0;
}

.status-filter-li__checkbox {
  white-space: nowrap;
}

.status-filter-li__checkbox label {
  min-width: 12rem;
  padding: 2px 1px;
  /* inline-block is required for overflow/text-overflow to apply on a label */
  display: inline-block;
  max-width: 40rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Panels */

.panel {
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
}

.form-group .panel {
  margin-bottom: 0;
  margin-top: 0.5rem;
}

/* Label classes */

label.opt-in-label {
  font-weight: normal;
  margin-bottom: 0px;
}

label.checkbox.slim {
  margin: 0px;
}

input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

[class*="checkbox"] label {
  cursor: pointer;
}

[type="radio"] {
  cursor: pointer;
}

.radio-inline[disabled],
.checkbox-inline[disabled] {
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}

.radio-inline[readonly],
.checkbox-inline[readonly],
input[type="checkbox"][readonly] {
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}

.checkbox.disabled {
  cursor: not-allowed;
}

.checkbox.disabled label {
  pointer-events: none;
}

.flex .checkbox {
  margin-top: 0;
  padding-top: 0;
}

.flex .checkbox label {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Lists */

ul.spaced > li,
ol.spaced > li {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

ul.inline > li,
ol.inline > li {
  display: inline-block;
  padding: 0 5px;
}

/* Pre */

pre.unstyled {
  background-color: none;
  border: none;
  margin: 0px;
  padding: 0px;
}

pre#message {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  word-break: normal;
}

/* Form additions */

form.searchable {
  clear: both;
}

.help-block__expander {
  color: #707070;
  margin-top: 0.2em;
}

.help-block__expander summary {
  font-size: 0.9em;
}

.help-block__expander div {
  border-left: 1px solid #7070706e;
  display: block;
  padding-left: 0.5em;
}

.form-group summary {
  padding-top: 0.5em;
}

/* remove the extra margin around checkboxes if this is provided by the form-group */
.form-group > * > .checkbox {
  margin: 0;
}

.secondary-link {
  margin-left: 10px;
}

.date-select {
  display: flex;
  flex-flow: row;
  gap: 0.5rem;
}

.date-select .help-block {
  padding-left: 2rem;
  display: inline-block;
}

.form-control.input-inline {
  display: inline;
  float: none;
  width: 35px;
  margin-top: -4px;
  margin-bottom: 0px;
}

.form-control.input-inline.input-sm {
  width: 150px;
}

.form-control.input-inline.input-xs {
  width: 50px;
}

/* Narrow numeric input cap (e.g. award-evaluation score fields). */
.input--max-100 {
  max-width: 100px;
}

.form-control.disabled {
  background-color: #eeeeee;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}
.form-control.readonly {
  background-color: #eeeeee;
}

.form-control.input-sm:not(textarea) {
  max-width: 120px;
  width: 120px;
}

.control-label--modal {
  font-size: 0.85em;
  padding-right: 0;
}

.admin-only,
.blue-area {
  border: 2px solid #ddd;
  background: rgba(200, 200, 255, 0.1);
  margin: 10px -15px;
  padding: 2px 15px;
}

.red-area {
  border: 2px solid #ddd;
  background: rgba(255, 150, 150, 0.1);
  margin: 10px -15px;
  padding: 2px 15px;
}

/* Hidden file selects */

input.hidden[type="file"] {
  display: block !important;
  visibility: visible !important;
  opacity: 0;
  height: 0px;
  width: 0px;
}

/* Form error & info messages */

input.validation-error,
select.validation-error,
textarea.validation-error {
  border-color: #bc2e29;
}

input.validation-error[type="radio"],
input.validation-error[type="checkbox"] {
  box-shadow: 0 4px 0 #bc2e29;
}

/* Rails field_with_errors is applied to nested forms sometimes */
.field_with_errors {
  --input-border: #bc2e29;
}
/* sometimes our select inputs dont get the rails error container, so use this selector: */
.form-group .field_with_errors + div {
  --input-border: #bc2e29;
}
.field_with_errors input[type="text"],
.field_with_errors input[type="email"],
.field_with_errors select,
.field_with_errors textarea {
  /* need important to override focus styles form bootstrap */
  border-color: #bc2e29 !important;
}
.field_with_errors input[type="radio"] {
  box-shadow: 0 4px 0 #bc2e29;
}
/* construct an after content for the label */
.form-horizontal .field_with_errors .control-label {
  position: relative;
}
.form-horizontal .field_with_errors .control-label:after {
  position: absolute;
  height: 100%;
  color: #bc2e29;
  top: 0.1em;
  width: 2.2em;

  /* content: "*";
  right: 0.1em;
  font-size: 1.6em; */

  content: "x";
  right: -0.2em;
  font-size: 1.4em;
}
.form-horizontal .field_with_errors .control-label--modal:after {
  right: -0.7em;
}

input.state-info,
select.state-info,
textarea.state-info {
  border-color: #31708f;
  box-shadow: 0 0 6px #31708f;
}

input.state-info[type="radio"],
input.state-info[type="checkbox"] {
  box-shadow: 0 4px 0 #31708f;
}

.select-container--multiple > * {
  min-width: 100%;
}

/* bookmark prompt */

.div-arrow,
.div-arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.div-arrow {
  border-width: 11px;
}

.div-arrow:after {
  content: "";
  border-width: 10px;
}

.div-arrow.bottom {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999;
  border-top-color: rgba(0, 0, 0, 0.25);
  border-bottom-width: 0;
}

.div-arrow.bottom:after {
  bottom: 1px;
  margin-left: -10px;
  content: " ";
  border-top-color: #fff;
  border-bottom-width: 0;
}

.div-arrow.left {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999;
  border-right-color: rgba(0, 0, 0, 0.25);
  border-left-width: 0;
}

.div-arrow.left:after {
  bottom: -10px;
  left: 1px;
  content: " ";
  border-right-color: #fff;
  border-left-width: 0;
}

.div-arrow.top {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.div-arrow.top:after {
  top: 1px;
  margin-left: -10px;
  content: " ";
  border-top-width: 0;
  border-bottom-color: #fff;
}

.div-arrow.right {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.div-arrow.right:after {
  right: 1px;
  bottom: -10px;
  content: " ";
  border-right-width: 0;
  border-left-color: #fff;
}

/* Miscellaneous Classes */

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}

.truncate {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-legend {
  text-transform: uppercase;
  font-weight: bold;
  color: #808080;
  margin: -15px 0 25px;
}

.primary-actions {
  float: right;
}

@media (max-width: 767px) {
  .primary-actions {
    justify-content: flex-end;
  }
}

.primary-actions .add-to-calendar-button {
  margin: -6px 0;
}

@media screen and (max-width: 991px) {
  .primary-actions__offset {
    margin-right: 0.5rem;
  }

  .primary-actions__offset > .btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

@media screen and (min-width: 991px) {
  .primary-actions__offset {
    margin-right: 20px;
  }
}

.border-box {
  border: 2px solid #000;
  padding: 0.8em 1em;
  margin: 1em 0;
}

.modal-iframe-container {
  box-shadow: inset 0px -10px 10px -10px rgba(0, 0, 0, 0.13);
  margin: -15px;
}

.modal-iframe-container iframe {
  width: 100%;
  min-height: 60vh;
  border: none;
}

.initially-hidden {
  display: none;
}

/******************/
/** APP ELEMENTS **/
/******************/
/* Navbar */

.notifications-dropdown__header {
  padding: 3px 20px 8px;
  border-bottom: 2px solid #ddd;
  color: #666;
}

.notifications-dropdown__header .glyphicon {
  font-size: 14px;
  padding-right: 5px;
}

#notifications-dropdown {
  min-width: 350px;
}

#notifications-dropdown .notification {
  position: relative;
  overflow: hidden;
  line-height: 1.8em;
  border-bottom: 1px solid #e1e1e1;
}

#notifications-dropdown .notification a {
  padding: 10px 20px;
  white-space: normal;
}

#notifications-dropdown .notification .notification-new-icon {
  color: #0078ff;
}

#notifications-dropdown .notification .notification-sub-title {
  color: #666;
  display: block;
  width: 245px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#notifications-dropdown .notification .notification-date {
  color: #777777;
  position: absolute;
  bottom: 0px;
  right: 6px;
  font-size: 70%;
}

.identifier .identity-name {
  display: inline-block;
  min-width: 100px;
  vertical-align: top;
  line-height: 1em;
  margin-top: -3px;
  margin-bottom: -5px;
}

.identifier .identity-name small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
  display: inline-block;
}

#loader {
  margin-left: 10px;
  margin-right: 0;
  margin-bottom: 0;
  pointer-events: none;
}

#loader svg {
  margin: auto;
  width: 25px;
  height: 25px;
  display: block;
  visibility: hidden;
}

/* Document Uploader/Viewer */

div.documents div.input-group {
  margin-bottom: 5px;
}

div.documents span.help-block {
  margin-bottom: 0px;
}

div.documents label.form-control {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Page Stats */

#page-stats {
  margin: -21px 0 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}

#page-stats ul.counter {
  margin: 0;
}

#page-stats h2 small {
  color: #fff;
  font-size: 16px;
}

#page-stats ul.counter li {
  border-left-color: #fff;
}

ul.counter {
  margin-left: 0;
  padding-left: 0;
}

ul.counter li {
  margin: 5px 25px 5px 0;
  border-left: 3px solid #ccc;
  padding: 0 15px 0 8px;
}

ul.counter li h2 {
  line-height: 1em;
  margin: 0;
}

@media (max-width: 991px) {
  ul.counter li {
    margin-right: 10px;
  }
}

.trumbowyg-dropdown button svg {
  display: none;
}

/******************/
/** FORMSET ONLY **/
/******************/

.member-form-statuses legend,
.vendor-form-statuses legend {
  padding-top: 1em;
}

.member-form-statuses form a:not(.btn):not([data-toggle]),
.vendor-form-statuses form a:not(.btn):not([data-toggle]) {
  text-decoration: underline;
}

#form-affix-wrapper {
  position: sticky;
  left: 0;
  top: 70px;
}

@media (min-width: 767px) and (max-width: 991px) {
  #form-affix-wrapper {
    font-size: 1.2rem;
  }
}

@media (max-width: 767px) {
  #form-affix-wrapper {
    position: relative;
    top: unset;
    position: fixed;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
  }
}
@media (max-width: 767px) {
  #form-affix-wrapper > * {
    pointer-events: auto;
  }
}

@media print {
  #form-affix-wrapper {
    position: static;
  }
}

@media (max-width: 767px) {
  #body-wrapper.form-affix--open #form-affix-wrapper + div {
    filter: blur(4px);
  }
}

#form-affix {
  position: relative;
}

@media (max-width: 767px) {
  #form-affix {
    transition: transform 0.2s ease-out;
    transform: translate3d(0, calc(100% - 60px), 0);
    padding-bottom: 1rem;
  }

  .form-affix--open #form-affix {
    transform: translate3d(0, 0, 0);
  }
}

@media print {
  #form-content {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .form-affix__footer {
    background: #fff;
    padding: 1rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
  }
}

.form-affix__footer-last-edited {
  display: block;
}

@media (min-width: 767px) {
  .form-affix__footer-last-edited {
    margin-bottom: 15px;
  }
}

.form-affix__header-right {
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.form-affix__header-expand-btn {
  display: block;
  height: 100%;
  width: 8rem;
  flex: 1;
}

.form-affix--open .form-affix__header-expand-btn {
  transform: rotate3d(0, 0, 1, 180deg);
}

@media (min-width: 767px) {
  .form-affix__header-expand-btn {
    display: none !important;
  }
}

.form-affix__counter {
  padding: 0.5rem;
}

#form-panel {
  position: relative;
}

#form-panel > .panel-heading > *:first-child {
  margin: 0;
}

@media (max-width: 767px) {
  #form-panel > .panel-heading {
    padding: 0;
  }

  #form-panel > .panel-heading > *:first-child {
    padding: 1rem;
  }
}

#form-member-info,
#form-vendor-info {
  display: none;
}

.form__fieldset-grouping .form-group {
  background: #0000000f;
  padding-bottom: 1.5rem;
  margin: 0;
}

.form__fieldset-grouping .form-group:last-child {
  margin-bottom: 1.5rem;
}

.form__fieldset-grouping .form-group:first-child {
  padding-top: 1.5rem;
}

/* Form Navigation */

#form-panel .list-group-item {
  padding: 5px 12px;
}

#form-panel .list-group-item > a {
  text-decoration: none;
  display: block;
  outline: none;
}

#form-panel .list-group-item > a[disabled] {
  pointer-events: none;
}

#form-panel .list-group-item > a.flex {
  display: flex;
  align-items: center;
}

#form-panel .list-group-item .form-name {
  margin-left: 10px;
  flex: 1;
}

#form-panel .list-group-item.active {
  border-left: 4px solid #337ab7 !important;
  border-color: #ddd;
  background-color: #fff;
  padding-left: 8px;
}

#form-panel .list-group-item.incomplete {
  background-color: #ffeeee;
  border-left-color: #d9534f !important;
}

#form-panel .list-group-item.incomplete a {
  color: #d9534f;
}

#form-panel .list-group-item.incomplete:hover {
  background-color: #fff3f3;
}

#form-panel .list-group-item.unsigned {
  background-color: #ffffee;
  border-left-color: #f0ad4e !important;
}

#form-panel .list-group-item.unsigned a {
  color: #f0ad4e;
}

#form-panel .list-group-item.unsigned:hover {
  background-color: #fffff3;
}

#form-panel .list-group-item.muted {
  background-color: #eee;
  border-left-color: #e1e1e1 !important;
}

#form-panel .list-group-item.muted a {
  color: var(--state-muted-text);
}

#form-panel .list-group-item.muted:hover {
  background-color: #f1f1f1;
}

#form-panel .list-group-item.complete {
  background-color: #eeffee;
  border-left-color: #5cb85c !important;
}

#form-panel .list-group-item.complete a {
  color: #5cb85c;
}

#form-panel .list-group-item.complete:hover {
  background-color: #f3fff3;
}

#form-panel .list-group-item.subform .form-name {
  font-size: 12px;
}
#form-panel .list-group-item.subform .form-name:before {
  content: "-";
  display: inline-block;
  margin-right: 0.5em;
}

/*****************/
/** CONTROLLERS **/
/*****************/
/* Home */

.family-row {
  margin-bottom: 5rem;
}

.login-div__icon {
  height: 12vh;
}

.login-div__icon > .glyphicon {
  font-size: 12vh;
}

.login-div img {
  height: 100%;
  width: auto;
}

.login-div__second {
  padding-top: 5vh;
}

.login-div__ul {
  text-align: left;
}

.login-div__ul li {
  margin-bottom: 0.5em;
}

.color-row .login-div {
  margin-top: 20px;
}

.color-row .container {
  min-height: 300px;
  min-height: 20vh;
}

.color-row {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
  .color-row {
    display: none;
  }
}

/* Login */

/* NO `background` here, on purpose — don't helpfully add one back.
   `.login-panel` is geometry only; each call site brings its own background:
     - FIVE sites pair it with Bootstrap's `.panel`, which supplies `background-color: #fff`
       (verified in bootstrap 3.4.1) — login.html.erb's main / awards / vendor panels, the
       streamlined returning-buyer alert, and reset_password.html.erb.
     - ONE site is the deliberate exception: the streamlined purchase summary pairs `.login-panel`
       with `.alert alert-info` and NO `.panel`, taking its blue from the alert.
   That exception is the whole reason this rule has no background. It used to set
   `rgba(255, 255, 255, 0.5)`, which smothered the alert's blue. And it only holds while the summary
   stays off `.panel`: put `panel` back on it and a white background and a blue one end up on one
   element deciding by source order — `.alert-info` is defined BEFORE `.panel` in bootstrap 3.4.1, so
   white wins and the purchase summary silently goes white, with nothing testing for it.
   Side effect of the removal, deliberate: the white panels are now fully opaque rather than letting
   the page's grey show through at 50%. */
.login-panel {
  width: 100%;
  max-width: 70rem;
  padding: 1rem 1.5rem;
  margin: 1.5rem auto 0;
}

.login-panel + .login-panel {
  margin-top: 1rem;
}

.login-panel__title {
  margin: 0;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  color: var(--text-color);
  border-bottom: 1px solid #e5e5e5;
}

.login-panel__reg-container {
  clear: both;
  width: 100%;
  gap: 1rem;
  flex-flow: row wrap;
  justify-content: center;
}

.login-panel__reg-container > .login-panel {
  flex: 1;
  min-width: 30rem;
  margin-top: 1rem;
}

@media (min-width: 991px) {
  .login-panel--has-signup-false {
    margin-top: 100px;
  }
}

.static-login .btn .glyphicon {
  margin-right: 5px;
}

.login-panel__creation-type-toggle .form-group {
  margin-bottom: 0;
}

.login-panel__account-creation {
  scroll-margin-top: 6rem;
}

.login-panel__account-creation
  [data-form-type="vendor"]
  [class*="identity-field__is-visible--"]:not(
    .identity-field__is-visible--vendor
  ) {
  display: none;
}
.login-panel__account-creation
  [data-form-type="vendor"]
  #create-account-form-fields-container {
  display: none !important;
}

.login-panel__account-creation
  [data-form-type="other-professional"]
  [class*="identity-field__is-visible--"]:not(
    .identity-field__is-visible--other-professional
  ) {
  display: none;
}

.login-panel__account-creation
  [data-form-type="staff"]
  [class*="identity-field__is-visible--"]:not(
    .identity-field__is-visible--staff
  ) {
  display: none;
}

.login-panel__account-creation
  [data-form-type="guest"]
  [class*="identity-field__is-visible--"]:not(
    .identity-field__is-visible--guest
  ) {
  display: none;
}

.login-panel__account-creation
  [data-form-type="guest"]
  .identity-field__is-required--false {
  display: none;
}

/* Collapsed on the streamlined deeplink only — the login panel is stood in for by the small
   "Already have an account?" prompt above it, whose CTA removes this class to reveal it in place.
   Collapsed, never removed: the panel holds BOTH the SSO buttons and the password form, and a
   returning buyer with no way back to them dead-ends on "email has already been taken". */
.login-panel--collapsed {
  display: none;
}

/* Streamlined ticket purchase (CU-86ajyy8yz). A logged-out buyer who arrived from a marked
   event/section fills in first name / last name / email and nothing else.
   What is trimmed HERE is visual only, which is not the same as harmless: a `display: none` field is
   still submitted AND still validated. That is fine for optional fields, and for required ones whose
   value is seeded onto the form's model — `membership_category` is, by the presenter's
   `streamlined_purchase_signup_attributes`, because a hidden select otherwise posts the blank prompt
   it was rendered with. Required fieldsets that cannot be answered that way are deliberately NOT
   handled here at all: the Primary Position / school fieldsets are omitted server-side by
   `renders_position_fields` (members/_form_fields.html.erb).
   Hide every direct child of the fields container, then re-show exactly Basic Information: a
   fieldset added to members/_form_fields later is hidden by default rather than silently leaking
   into the buyer's form.
   Note this does NOT reach the captcha — that block lives inside #create-account-form but outside
   #create-account-form-fields-container, which is why the challenge survives the trim. */
.login-panel__account-creation
  [data-form-type="ticket-buyer"]
  #create-account-form-fields-container
  > * {
  display: none;
}

.login-panel__account-creation
  [data-form-type="ticket-buyer"]
  #create-account-form-fields-container
  > fieldset.identity-fieldset__basic-information {
  display: block;
}

/* …then trim within Basic Information down to the three fields the buyer actually supplies. */
.login-panel__account-creation
  [data-form-type="ticket-buyer"]
  .identity-field__cc-email,
.login-panel__account-creation
  [data-form-type="ticket-buyer"]
  .identity-field__preferred-name-group,
.login-panel__account-creation
  [data-form-type="ticket-buyer"]
  .identity-field__state-of-residence,
.login-panel__account-creation
  [data-form-type="ticket-buyer"]
  .identity-field__country-of-residence,
.login-panel__account-creation
  [data-form-type="ticket-buyer"]
  .identity-fields__name
  input[name$="[middle_name]"] {
  display: none;
}

.identity-field__ethnicity table {
  margin-bottom: 0;
}

/******************/
/** MEDIA STYLES **/
/******************/
@media (max-width: 767px) {
  .affix {
    position: static;
  }
}

@media (max-width: 767px) {
  #loader {
    float: left;
    margin: 0;
    margin-left: 1rem;
    margin-top: 15px;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .dl-horizontal dt {
    float: left;
    width: 120px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dl-horizontal dd {
    margin-left: 140px;
  }
}

/************************/
/** MARKETPLACE STYLES **/
/************************/

.uvo {
  display: grid;
  column-gap: 3rem;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  text-align: center;
}

.uvo__org-logo {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  margin: 0;
  width: 5rem;
  height: 5rem;
  border: none;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  text-align: center;
  column-gap: 3rem;
}

.card__right-action {
  position: absolute;
  right: 0;
  top: 0;
}

.card-org-logo {
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
  margin: 0;
  width: 5rem;
  height: 5rem;
  border: none;
}

.trumbowyg .trumbowyg-button-pane {
  z-index: 1;
}

.field--remove-signup-state > *:not(.field__remove-signup-container) {
  display: none !important;
}

.form-group--divider {
  padding-top: 1rem;
  border-top: 1px solid #00000030;
}

.form-group:not(.field--remove-signup-state) .field__remove-signup-container {
  display: none;
}
.glyphicon {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}

.glyphicon-athlete {
  font-family: "FinalForms Icons";
}

.glyphicon-athlete:before {
  content: "\e602";
}

.glyphicon-student {
  font-family: "FinalForms Icons";
}

.glyphicon-student:before {
  content: "\e602";
}

.glyphicon-parent,
.glyphicon-parents {
  font-family: "FinalForms Icons";
}

.glyphicon-parent:before,
.glyphicon-parents:before {
  content: "\e603";
}

.glyphicon-coach {
  font-family: "FinalForms Icons";
}

.glyphicon-coach:before {
  content: "\e604";
}

.glyphicon-admin,
.glyphicon-staff {
  font-family: "FinalForms Icons";
}

.glyphicon-admin:before,
.glyphicon-staff:before {
  content: "\e606";
}

.glyphicon-nurse {
  font-family: "FinalForms Icons";
}

.glyphicon-nurse:before {
  content: "\e709";
}

.glyphicon-support {
  font-family: "FinalForms Icons";
}

.glyphicon-support:before {
  content: "\e720";
}

.glyphicon-school {
  font-family: "FinalForms Icons";
}

.glyphicon-school:before {
  content: "\e608";
}

.glyphicon-bus {
  font-family: "FinalForms Icons";
}

.glyphicon-bus:before {
  content: "\e609";
}

.glyphicon-brain {
  font-family: "FinalForms Icons";
}

.glyphicon-brain:before {
  content: "\e60f";
}

.glyphicon-cake {
  font-family: "FinalForms Icons";
}

.glyphicon-cake:before {
  content: "\e611";
}

.glyphicon-covid {
  font-family: "FinalForms Icons";
}

.glyphicon-covid:before {
  content: "\e612";
}

.glyphicon-checkmark {
  font-family: "FinalForms Icons";
}

.glyphicon-checkmark:before {
  content: "\e620";
}

.glyphicon-athlete-big {
  font-family: "FinalForms Icons";
}

.glyphicon-athlete-big:before {
  content: "\e700";
}

.glyphicon-student-big {
  font-family: "FinalForms Icons";
}

.glyphicon-student-big:before {
  content: "\e702";
}

.glyphicon-parent-big,
.glyphicon-parents-big {
  font-family: "FinalForms Icons";
}

.glyphicon-parent-big:before,
.glyphicon-parents-big:before {
  content: "\e703";
}

.glyphicon-coach-big {
  font-family: "FinalForms Icons";
}

.glyphicon-coach-big:before {
  content: "\e704";
}

.glyphicon-staff-big,
.glyphicon-admin-big {
  font-family: "FinalForms Icons";
}

.glyphicon-staff-big:before,
.glyphicon-admin-big:before {
  content: "\e706";
}

.glyphicon-staff-female-big,
.glyphicon-admin-female-big {
  font-family: "FinalForms Icons";
}

.glyphicon-staff-female-big:before,
.glyphicon-admin-female-big:before {
  content: "\e707";
}

.glyphicon-nurse-big,
.glyphicon-nurse-female-big {
  font-family: "FinalForms Icons";
}

.glyphicon-nurse-big:before,
.glyphicon-nurse-female-big:before {
  content: "\e709";
}

.glyphicon-support-big {
  font-family: "FinalForms Icons";
}

.glyphicon-support-big:before {
  content: "\e720";
}

.glyphicon-secretary-big,
.glyphicon-secretary-male-big {
  font-family: "FinalForms Icons";
}

.glyphicon-secretary-big:before,
.glyphicon-secretary-male-big:before {
  content: "\e710";
}

.glyphicon-secretary-female-big {
  font-family: "FinalForms Icons";
}

.glyphicon-secretary-female-big:before {
  content: "\e711";
}

.glyphicon-groups {
  font-family: "FinalForms Icons";
  top: 0;
}

.glyphicon-groups:before {
  content: "\e603";
}

.glyphicon-events:before {
  content: "\e109";
}

.glyphicon-envelope-alt:before {
  content: "\2709";
}

.glyphicon-member:before {
  content: "\e008";
}

.glyphicon-vendor:before {
  content: "\e139";
}

.glyphicon-hourglass-half:before {
  content: "\231b";
}

.glyphicon-phone:before {
  content: "\e182";
}

.glyphicon-cell:before {
  content: "\e145";
}

.glyphicon-files:before {
  content: "\e022";
}

.glyphicon-plus-sign-o:before {
  content: "\e089";
}

.glyphicon-minus-sign-ff:before {
  content: "\e082";
}

.glyphicon-minus-sign-o:before {
  content: "\e088";
}

.glyphicon-check:before {
  content: "\e013";
}

.glyphicon-checked-box {
  font-family: "Glyphicons Halflings";
}

.glyphicon-checked-box:before {
  content: "\e067";
}

.glyphicon-clipboard:before {
  content: "\e205";
}

.glyphicon-archive:before {
  content: "\e121";
}

.glyphicon-caret-right:before {
  content: "\e080";
}

.glyphicon-admin {
  font-family: "FinalForms Icons";
  top: 0;
}

.glyphicon-admin:before {
  content: "\e606";
}

.glyphicon-checkbox:before {
  content: "\e067";
}

.glyphicon-tags {
  margin-right: 0.2em;
}

.glyphicon-folder-open {
  margin-right: 0.1em;
}

.glyphicon-usd {
  margin-left: -0.1em;
}
.glyphicon-log-in {
  margin-left: -0.1em;
}

.svg-icon {
  width: 1em;
  height: 1em;
  pointer-events: none;
}

.svg-icon + span {
  padding-left: 0.5em;
}
body {
  background-color: var(--background-color);
  background-repeat: repeat;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

html {
  scroll-padding-top: 70px;
}

#content {
  min-height: 720px;
  min-height: 60vh;
}

footer {
  margin-top: 2vh;
  margin-bottom: 40px;
  color: #999;
}

footer a img {
  opacity: 0.6;
}

footer a:hover img {
  opacity: 1;
}

.sticky-tab__container {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-flow: row nowrap;
  padding: 1rem;
  background: white;
  border: 1px solid #e6e6e6;
  transition: all 0.2s ease-out;
  gap: 1rem;
}

.sticky-tab__container.sticky-tab__container--open {
  transform: translateX(0);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
}

.sticky-tab__container button {
  position: absolute;
  top: 0;
  bottom: 0;
  --btn-background: var(--brand-warning);
  --btn-color: #000;
}

.support-tab__container {
  bottom: 10vh;
  right: 0;
  transform: translatex(100%);
}

.support-tab__container.sticky-tab__container--open {
  transform: translateX(0);
}

.support-tab__container button {
  left: -4rem;
  width: 4rem;
}

.become-tab__container {
  top: 6rem;
  left: 0;
  transform: translatex(-100%);
}

.become-tab__container.sticky-tab__container--open .glyphicon {
  transform: rotate(180deg);
}

.become-tab__container button {
  right: -3rem;
  width: 3rem;
}

.action-mode-tab__container {
  top: 12rem;
  right: 0;
  transform: translatex(100%);
}

.action-mode-tab__container button {
  left: -6rem;
  width: 6rem;
}

@media (max-width: 767px) {
  .action-mode-tab__container {
    top: 80vh;
  }

  footer {
    text-align: center;
    margin-top: 40px !important;
  }

  footer .pull-right,
  footer .pull-left {
    float: none !important;
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.layout__bottom-sticky-container {
  position: sticky;
  bottom: 0;
  width: 100%;
  z-index: 3;
}

.layout__bottom-sticky-container .flash-message {
  box-shadow: 0px 0px 6px 3px #3232322e;
  opacity: 0;
  transform: scale(0.5);
  animation: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.5s forwards pop-in;
}

.niaaa-award-nominations-edit.has-steps__true
  .layout__bottom-sticky-container
  .flash-message {
  margin-bottom: 10rem;
}

.zoom-splashscreen {
  display: none !important;
}
.print-inline {
  display: none;
}

.print-flex {
  display: none;
}

@media print {
  .container {
    width: 100%;
  }

  #content {
    padding: 0;
  }

  .no-print {
    display: none !important;
  }

  .page-break {
    display: block;
    page-break-after: always;
    break-after: page;
  }

  .no-page-break {
    page-break-inside: avoid;
    break-after: avoid;
  }

  .print-nowrap {
    white-space: nowrap;
  }

  .print-inline {
    display: inline !important;
    visibility: inherit !important;
  }

  .print-flex {
    display: flex !important;
    visibility: inherit !important;
  }

  .print.hidden {
    display: inherit !important;
    visibility: inherit !important;
  }

  .well.lead {
    padding: 10px;
    margin: 0;
    box-shadow: none;
    font-size: 11pt;
  }

  .input-group-addon,
  .form-control {
    height: 24px;
    font-size: 12px;
  }

  .input-group-addon,
  .form-control {
    padding: 4px 8px;
  }

  select .caret {
    display: none;
  }

  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 1px;
  }

  header {
    display: none;
  }

  .primary-actions {
    display: none;
  }

  .form-group {
    page-break-inside: avoid;
  }

  #body-wrapper a:after {
    content: none;
  }
  /* Don't show links at all. (Showing links was bootstrap addition) */

  .sorters a:after {
    content: none;
  }
  /* Don't show links for images, or javascript/internal links */

  #form-submit,
  #form-affix,
  footer {
    display: none;
  }

  #form-member-info,
  #form-vendor-info {
    display: block;
  }

  h1 {
    font-size: 18pt;
  }

  h2 {
    font-size: 14pt;
  }

  h3 {
    font-size: 12pt;
  }

  h4 {
    font-size: 11pt;
  }

  legend {
    font-size: 11pt;
  }

  h5 {
    font-size: 10pt;
  }

  h6.sub-title {
    font-size: 7pt;
    line-height: 9pt;
    margin: 0 0 2pt;
  }

  html {
    margin: 0px;
  }

  body {
    font-size: 8pt;
    width: 100%;
    margin: 0;
    padding-top: 0;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body p {
    margin-bottom: 0.5em;
  }

  ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent !important;
  }

  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent !important;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent !important;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent !important;
  }

  #flash-content {
    display: none !important;
  }
}
/* // We need to override trix.css’s image gallery styles to accommodate the
// <action-text-attachment> element we wrap around attachments. Otherwise,
// images in galleries will be squished by the max-width: 33%; rule. */
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content
  .attachment-gallery.attachment-gallery--2
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content
  .attachment-gallery.attachment-gallery--4
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

trix-toolbar .trix-button--icon-underline::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/%3E%3C/svg%3E");
}

.trix-editor-container {
  min-width: 100%;
  background-color: #fff;
}
.trix-editor-container trix-editor {
  width: 100%;
}
.trix-editor-container trix-toolbar {
  min-height: 35px;
}
.trix-editor-container.well {
  padding: 5px;
}
.wysiwyg-editor__loading {
  display: none;
}

/* Trumbowyg Editor styles */
.trumbowyg-editor.trumbowyg-reset-css a.btn {
  /* // allow links to inherit text color from theme */
  color: #fff !important;
  text-decoration: none !important;
}
/* if reset is disabled, these styles ensure the editor looks consistent */
.trumbowyg-box {
  background-color: #fff;
}
.alert-muted {
  color: var(--state-muted-text);
  background-color: var(--state-muted-bg);
  border-color: var(--state-muted-border);
}

.alert-muted hr {
  border-top-color: color-mix(in srgb, var(--state-muted-border), black 5%);
}

.alert-muted .alert-link {
  color: color-mix(in srgb, var(--state-muted-text), black 10%);
}

.alert-caution {
  color: var(--state-caution-text);
  background-color: var(--state-caution-bg);
  border-color: var(--state-caution-border);
}

.alert-caution hr {
  border-top-color: color-mix(in srgb, var(--state-caution-border), black 5%);
}

.alert-caution .alert-link {
  color: color-mix(in srgb, var(--state-caution-text), black 10%);
}

.alert__spacer {
  margin: 1rem 0;
}
.assign-groups__container form {
  margin: 0 auto;
  max-width: 60rem;
}

.assign-groups__tabs {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

.assign-groups__container[data-step="2"]
  .assign-groups__step:not(.assign-groups__step--2) {
  display: none;
}

.assign-groups__container[data-step="3"]
  .assign-groups__step:not(.assign-groups__step--3) {
  display: none;
}

.authorized-controlling-connected-account-roles__container
  .authorized-controlling-connected-account-roles__centered {
  margin: 0 auto;
  max-width: 60rem;
}

.authorized-controlling-connected-account-roles__container .input-group {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

.authorized-controlling-connected-account-roles__container select {
  width: 12rem;
  display: inline-block;
}

.authorized-controlling-connected-account-roles__container .input-group-btn {
  width: auto;
  flex: 0 1 auto;
}

#email_form[sending-via="personal"] + .row {
  display: none;
}

#email_form[sending-via="personal"] + .row + .row {
  display: none;
}

#body-wrapper.static-resource #banners {
  display: none;
}

#body-wrapper.static-resource #contents {
  overflow: hidden;
}

@media only screen and (max-device-width: 800px) {
  #body-wrapper.static-resource #contents .doc-content {
    padding: 1rem;
  }
}

#body-wrapper.static-resource #contents .doc-content {
  max-width: 100%;
  padding: 2rem;
}

.affiliate-associations__info {
  flex: 1;
}

/* The heading wrapper is an inline-flex row with flex-gap--025 (CU-86ajq66xj — name + category
   flow inline on one line); zero the children's default margins so that gap alone governs the
   space between the association name and its category. */
.affiliate-associations__name,
.affiliate-associations__category {
  margin: 0;
}

/* `.affiliate-associations__group` stacks to a column layout when *its own* box gets narrow —
   not the page viewport (CU-86ajq66xj). This tile renders inside the split-view form's main
   content column (`#form-content`, col-md-8 — see layouts/_split_view_layout.html.erb), which
   can be much narrower than the page long before any page-width breakpoint fires, and just as
   often has plenty of room even on a narrow page (e.g. once the sidebar collapses to col-xs-12).
   `.affiliate-associations__ul` (the tile's direct parent) is the containment root so the query
   reflects the tile's actual available width wherever it's embedded. Scoped to this component's
   own selectors — same pattern as `.member-title-v2__container` in member-titles.css — rather than
   repurposing the shared page-viewport `.flex-flow--column-sm` utility (base/flex.css), which
   ~20 other unrelated views/presenters still rely on for a true viewport breakpoint. */
.affiliate-associations__ul {
  container-type: inline-size;
  container-name: affiliate-associations-container;
}

@container affiliate-associations-container (max-width: 480px) {
  .affiliate-associations__group {
    flex-flow: column;
  }
}

.position-invitations__cta-container {
  bottom: 0;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  position: sticky;
  background: var(--background-color);
  box-shadow: 0px -8px 10px -8px rgba(0, 0, 0, 0.2);
}

.position-invitations__item--highlighted td {
  background-color: rgba(255, 255, 0, 0.2);
}
.help-block {
  color: #707070;
}

a.disabled {
  pointer-events: auto !important;
}
/* DEFAULT: 1px 5px */
.btn-xs {
  padding: 2px 5px;
}

/* // need to include not just IMMEDIATE children... */
.btn-group-sm .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

/* // bootstrap assumes safari is still broken: */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body {
    input.form-control[type="date"],
    input.form-control[type="time"],
    input.form-control[type="datetime-local"],
    input.form-control[type="month"] {
      line-height: normal;
    }
  }
}

@media (min-width: 768px) {
  /* // Automatically set modal's width for larger viewports */
  #body .modal-dialog {
    width: 700px;
  }

  /* // Modal sizes */
  #body .modal-sm {
    width: 300px;
  }
}
:root {
  --btn-color: #fff;
  --btn-background: #007bff;
  --btn-text-shadow: none;
}
.btn small {
  font-size: 12px;
}
.btn.disabled,
.btn:disabled {
  pointer-events: auto;
}
.btn {
  transition: all 0.2s ease-out;
  /* // https://stackoverflow.com/a/21201135/406725 */
  outline: none !important;
  cursor: pointer;
}
.btn button {
  outline: none;
  padding: 0;
  margin: 0;
  border: 0;
  appearance: none;
  background: none;
}
@supports (color: color-mix(in srgb, var(--btn-background) 95%, white 5%)) {
  .btn[class*="btn-"] {
    color: var(--btn-color);
    font-weight: bold;
    background-image: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--btn-background) 95%, white 5%) 0%,
      color-mix(in srgb, var(--btn-background) 95%, black 5%) 100%
    );
    border-color: color-mix(in srgb, var(--btn-background) 90%, black 10%);
    border-bottom-color: color-mix(
      in srgb,
      var(--btn-background) 80%,
      black 20%
    );
    text-shadow: var(--btn-text-shadow);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}
@supports (color: color-mix(in srgb, var(--btn-background) 95%, white 5%)) {
  .btn[class*="btn-"]:hover,
  .btn[class*="btn-"]:focus,
  .btn[class*="btn-"]:active,
  .btn[class*="btn-"].active {
    background-image: linear-gradient(
      to bottom,
      var(--btn-background) 0%,
      color-mix(in srgb, var(--btn-background) 90%, black 10%) 100%
    );
    border-color: color-mix(in srgb, var(--btn-background) 80%, black 20%);
    color: var(--btn-color);
  }
}
@supports (color: color-mix(in srgb, var(--btn-background) 95%, white 5%)) {
  .btn[class*="btn-"].disabled,
  .btn[class*="btn-"][disabled],
  fieldset[disabled] .btn[class*="btn-"],
  .btn[class*="btn-"].disabled:hover,
  .btn[class*="btn-"][disabled]:hover,
  fieldset[disabled] .btn[class*="btn-"]:hover,
  .btn[class*="btn-"].disabled:focus,
  .btn[class*="btn-"][disabled]:focus,
  fieldset[disabled] .btn[class*="btn-"]:focus,
  .btn[class*="btn-"].disabled:active,
  .btn[class*="btn-"][disabled]:active,
  fieldset[disabled] .btn[class*="btn-"]:active,
  .btn[class*="btn-"].disabled.active,
  .btn[class*="btn-"][disabled].active,
  fieldset[disabled] .btn[class*="btn-"].active {
    background-color: var(--btn-background);
    border-color: color-mix(in srgb, var(--btn-background) 95%, black 5%);
  }
}
.btn-default {
  --btn-color: var(--btn-default-color);
  --btn-background: var(--btn-default-bg);
}
.btn-primary {
  --btn-color: var(--btn-primary-color);
  --btn-background: var(--btn-primary-bg);
}
.btn-success {
  --btn-color: var(--btn-success-color);
  --btn-background: var(--btn-success-bg);
}
.btn-info {
  --btn-color: var(--btn-info-color);
  --btn-background: var(--btn-info-bg);
}
.btn-warning {
  --btn-color: var(--btn-warning-color);
  --btn-background: var(--btn-warning-bg);
}
.btn-danger {
  --btn-color: var(--btn-danger-color);
  --btn-background: var(--btn-danger-bg);
}
.btn-inverse {
  --btn-color: var(--btn-inverse-color);
  --btn-background: var(--btn-inverse-bg);
}
.btn-muted {
  --btn-color: var(--btn-muted-color);
  --btn-background: var(--btn-muted-bg);
}
.btn-brand {
  --btn-color: #fff;
  --btn-background: #ed1c24;
}
.btn-link {
  --btn-color: var(--link-color);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.btn.btn-link:active {
  opacity: 0.6;
}
.btn.btn-link:focus {
  opacity: 0.8;
}
@media (hover: hover) {
  .btn.btn-link:hover {
    opacity: 0.8;
  }
}

.btn__label {
  /* prevent a tag default focus styles: */
  outline: none;
  text-decoration: none !important;
}
/* Block: checkout-page — payment option cards (rendered as <label>) */
.checkout-page__payment-option {
  display: block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #fff;
  transition:
    border-color 0.15s,
    background-color 0.15s;
  cursor: pointer;
  /* Override control-label defaults */
  font-weight: normal;
  text-align: left;
  width: 100%;
  float: none;
}

.checkout-page__payment-option:hover {
  border-color: #337ab7;
  background-color: #f8fbff;
}

.checkout-page__payment-option:has(input:checked) {
  border-color: #337ab7;
  background-color: #f0f7ff;
}

/* Radio button alignment — align with first line of label text */
.checkout-page__payment-option input[type="radio"] {
  margin-top: 4px;
}

/* Tighten title spacing in checkout split-view */
#form-panel .main-title__container .main-title {
  margin-bottom: 0;
}

#form-panel .main-title__container br {
  display: none;
}

#form-panel .main-title__divider {
  margin-bottom: 12px;
}

/* Step nav icons — consistent sizing for numbers and checkmarks */
.checkout-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #474949;
  font-size: 11px;
  flex-shrink: 0;
}

.checkout-step-icon--done {
  border-color: #3c763d;
  color: #3c763d;
  background-color: #f0fff0;
}

/* Inline Stripe Payment Element */
#payment-element {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.payment-submit-row {
  margin-top: 1rem;
}
.checkout-page__external-form label {
  min-width: 9rem;
}
.checkout-page__external-form [type="number"] {
  width: 14.8rem;
}
.cropper-container {
  --cropper-width: 300px;
  --cropper-height: 100px;
  --cropper-aspect-ratio: 3 / 1;
  --cropper-view-port-width: 668px;
  --cropper-canvas-width: calc(var(--cropper-width) * 2.5);
  --cropper-computed-width: min(
    var(--cropper-canvas-width),
    var(--cropper-view-port-width)
  );
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-flow: column;
}
.cropper-container cropper-canvas {
  width: var(--cropper-computed-width);
  height: calc(var(--cropper-computed-width) / var(--cropper-aspect-ratio));
}
.cropper-container__img {
  min-height: 200px;
  max-width: 100%;
  width: 100%;
}
.cropper-inner-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
  max-width: 100%;
  justify-content: space-evenly;
  width: 100%;
}
.cropper-footer {
  margin-top: 1rem;
  border-top: 1px solid #ddd;
  padding-top: 1.5rem;
  width: 100%;
  text-align: right;
}
.cropper-side {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-around;
  max-width: 100%;
}
.cropper-side > cropper-viewer {
  border: 1px solid #ddd;
  display: inline-block;
  width: calc(var(--cropper-width) * 1);
  height: calc(var(--cropper-height) * 1);
  max-width: 450px;
}
.document-img-field__container {
  margin-bottom: 0;
}
.document-img-field__controls {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
.document-img-field__img-container {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: 0 auto;
}
.document-img-field__overlay-img {
  opacity: 35%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image:
    linear-gradient(45deg, #000000 25%, rgba(0, 0, 0, 0.2) 25%),
    linear-gradient(-45deg, #000000 25%, rgba(0, 0, 0, 0.2) 25%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.2) 75%, #000000 75%),
    linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 75%, #000000 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0px;
  background-repeat: repeat;
}
.document-img-field__clip-img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.cropper-toolbar {
  text-align: center;
}
/* Taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */
dialog {
  animation: dialog-fade-out 0.3s ease-out;
}

dialog[open] {
  animation: dialog-fade-in 0.4s ease-out;
}

dialog[open]::backdrop {
  animation: backdrop-dialog-fade-in 0.2s ease-out forwards;
}

/* Animation keyframes */

@keyframes dialog-fade-in {
  0% {
    opacity: 0;
    transform: scaleY(1.1);
    display: none;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }
}

@keyframes dialog-fade-out {
  0% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }

  100% {
    opacity: 0;
    transform: scaleY(0.9);
    display: none;
  }
}

@keyframes backdrop-dialog-fade-in {
  0% {
    background-color: #00000000;
  }

  100% {
    background-color: #00000040;
  }
}
.doc-img {
  --doc-img-height: 0;
  --doc-img-width: 0;
  --doc-img-aspect-ratio: auto;
  display: block;
  width: var(--doc-img-width);
  height: auto;
  max-width: 100%;
  aspect-ratio: var(--doc-img-aspect-ratio);
  background-color: rgba(87, 87, 87, 0.092);
}

.doc-img__rounded {
  border-radius: 0.5rem;
}

.doc-img__cover {
  object-fit: cover;
}

.doc-img__contain {
  object-fit: contain;
}

.doc-img--no-img {
  background-image: linear-gradient(#00000000, #00000014);
  background-color: rgba(0, 0, 0, 0);
}
.edit-form__sticky-submit-container {
  position: sticky;
  bottom: 0;
  background-color: var(--background-color);
  padding: 1.5rem;
  box-shadow: 0px -5px 5px -3px rgba(3, 3, 3, 0.2);
  /* above inputs ONLY (not flash) */
  z-index: 2;
}
.event-badge {
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.11);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  flex: 0 1 auto;
  color: var(--color) !important;
  background-color: var(--bg-color);
  font-family: var(--font-family);
  width: var(--badge-w);
  height: calc(var(--badge-h) + var(--ticket-h) * 2);
  max-width: var(--badge-w);
  min-width: var(--badge-w);
  max-height: calc(var(--badge-h) + var(--ticket-h) * 2);
  min-height: calc(var(--badge-h) + var(--ticket-h) * 2);
}

.event-badge .header-font {
  font-family: var(--font-family);
}

@media print {
  .event-badge {
    border: none;
  }

  .event-badge__grid--is-debug-true .event-badge {
    border: 1px solid red !important;
  }

  .event-badge * {
    color: var(--color) !important;
  }
}

.event-badge--custom {
  border-radius: 3em;
}

@media print {
  .event-badge--custom {
    border: 1px solid rgba(0, 0, 0, 0.11);
  }
}

.event-badge--variant-split {
  --qr-h: 0.7em;
  --h1-font-size-modifier: 3.5;
  --top-right-font-size-modifier: 1.5;
}

.event-badge--variant-inverted-color {
  --color: #ffffff;
  --bg-color: var(--theme-primary-color);
}

.event-badge__grid {
  font-size: 1in;
  font-size: var(--inch);
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem 0;
  gap: 2rem 0;
  /* --badge-gap controls the vertical gap between badges */
  --badge-gap: 0;
  /* --color controls the text color */
  --color: var(--text-color);
  /* --bg-color controls the background color */
  --bg-color: #ffffff;
  /* --badge-w controls the badge width */
  --badge-w: 4em;
  /* --badge-h controls the badge height */
  --badge-h: 3em;
  /* --font-size controls the text font size (not the EM related, which is 1in) */
  --font-size: 0.12em;
  /* --gutter controls the spacing element used for various items inside the badge */
  --gutter: 0.15em;
  /* --qr-h controls the height of the QR code */
  --qr-h: 1.25em;
  --sponsor-h: 1.55em;
  --font-family:
    "Lexend Deca", "Roboto", "Helvetica Neue", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI emoji";
  --association-img-h: calc(var(--badge-h) / 4.6);
  --h1-font-size-modifier: 3;
  --top-right-font-size-modifier: 1.25;
  --font-size-modifier: 1;
  --ticket-h: 0em;
}

.event-badge__grid--avery_5371 {
  --sponsor-h: 2.3em;
  --badge-w: 3.5em;
  --badge-h: 2em;
  --font-size: 0.08em;
  --gutter: 0.1em;
  --qr-h: 0.85em;
}

.event-badge__grid--avery_5163 {
  --sponsor-h: 2.3em;
  --badge-w: 4em;
  --badge-h: 2em;
  --font-size: 0.08em;
  --gutter: 0.1em;
  --qr-h: 0.85em;
  --association-img-h: calc(var(--badge-h) / 4);
  --badge-gap: 0.2em;
}

.event-badge__grid--avery_8520 {
  --sponsor-h: 2.3em;
  --badge-w: 4em;
  --badge-h: 6em;
  --gutter: 0.15em;
  --qr-h: 1.45em;
  --font-size: 0.15em;
  --association-img-h: 0.8em;
  --bottom-section-h: 1.25em;
  --badge-gap: 0.05em;
  --ticket-h: 1.5em;
}
.event-badge--has-tickets-false {
  --ticket-h: 0em;
}

.event-badge__grid--avery_8520 .event-badge--qr-false {
  --association-img-h: 1.5em;
}

.event-badge__grid--avery_8520.event-badge__grid--is-e2e {
  --badge-w: 4.25em;
  --badge-gap: 0;
}

.event-badge__grid--labels {
  --sponsor-h: 2.3em;
  --badge-w: 2.625em;
  --badge-h: 2em;
  --font-size: 0.09em;
  --gutter: 0.1em;
  --qr-h: 0.85em;
  --badge-w: 4.25em;
  --badge-gap: 0.125em;
}

.event-badge__grid--avery_5392_alt {
  --association-img-h: calc(var(--badge-w) / 1.5);
  --font-size: 0.115em;
  --qr-h: 0.95em;
  --padding-top: calc(var(--gutter) * 6);
}

.event-badge__grid--basa {
  --font-family: Verdana, Geneva, Tahoma, sans-serif;
}

@media screen and (max-width: 768px) {
  .event-badge__grid {
    margin-left: -15px;
    margin-right: -15px;
  }

  .body__hide-layout--false .event-badge__grid {
    font-size: calc(100vw / 4.5);
  }
  .body__hide-layout--false .event-badge__grid.event-badge__grid--custom {
    font-size: calc(100vw / 4.5 / 10);
  }
}

@media print {
  .event-badge__grid {
    display: block;
    font-size: var(--inch);
    columns: 2;
    column-gap: var(--badge-gap) !important;
    margin: 0 auto;
    gap: 0;
    width: 100vw;
    padding: 0;
  }

  .event-badge__grid--labels {
    columns: 3;
  }

  .event-badge__grid--avery_74520 {
    columns: 1;
  }

  .event-badge__grid--custom {
    font-size: calc(var(--inch) * 0.11);
  }
}

.event-badge__bg-half-clip-triangle-v2 {
  display: block;
  position: absolute;
  top: 0;
  right: -2px;
  left: -2px;
}

.event-badge__bg-half-clip-triangle {
  display: none;
  position: absolute;
  top: 0;
  width: 160%;
  left: 0;
  transform: rotate(180deg);
  height: 38%;
}

.event-badge--custom .event-badge__bg-half-clip-triangle {
  display: block;
  height: 18em;
}

.event-badge__bg-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: var(--bg-color);
  z-index: -1;
}

.event-badge__bg-half-clip-triangle--second {
  left: 60%;
  top: -14.5%;
}

.event-badge--custom .event-badge__bg-half-clip-triangle--second {
  top: -7em;
}

.event-badge__bg-white-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.event-badge__bg-white-container img,
.event-badge__bg-white-container svg {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.event-badge__content-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  padding: 0;
  line-height: 1.2;
}

.event-badge__content-row > * {
  font-size: calc(var(--font-size) * var(--font-size-modifier));
}

.event-badge__content-row > * small {
  font-size: 0.5em;
}

.event-badge__content-row small {
  line-height: 2.7em;
  vertical-align: bottom;
  font-weight: normal;
}

.event-badge--avery_5392_alt.event-badge--qr-true .event-badge__content-row {
  justify-content: flex-start;
  text-align: left;
}

.event-badge__content-row--h1 {
  font-weight: bold;
  --font-size-modifier: var(--h1-font-size-modifier);
}
.event-badge__content-row--h1 > span {
  max-width: 100%;
  /* need this or the designation will cause the text to not line up w first and last name */
  display: inline-flex;
  align-items: center;
}

.event-badge__content-row--h1.event-badge__content-row--h1-long {
  --font-size-modifier: calc(var(--h1-font-size-modifier) * 0.75);
}

.event-badge--labels .event-badge__content-row--h1 {
  display: block;
  text-align: center;
  line-height: var(--font-size);
  height: calc(var(--badge-h) * 0.5);
}

.event-badge--basa .event-badge__content-row--h1 {
  display: block;
}

.event-badge--basa .event-badge__content-row--h1 > span {
  display: none;
  align-items: center;
  justify-content: center;
}

.event-badge--basa .event-badge__content-row--h1 > span:first-child {
  font-size: 36pt;
  display: flex;
}

.event-badge--basa .event-badge__content-row--h1 > span:last-child {
  font-size: 24pt;
  display: flex;
}

.event-badge--basa
  .event-badge__content-row--h1.event-badge__content-row--h1-long
  span:last-child {
  padding-left: 0;
}

.event-badge__content-row--h2 {
  font-weight: bold;
  --font-size-modifier: 2.1;
}

.event-badge__content-row--h2.event-badge__content-row--h2-long {
  --font-size-modifier: 1.7;
}

.event-badge--basa .event-badge__content-row--h2 {
  display: none;
}

.event-badge__content-row--h3 {
  --font-size-modifier: 1.7;
  font-weight: 500;
}

.event-badge__content-row--h3.event-badge__content-row--h3-long {
  --font-size-modifier: 1.3;
}

.event-badge--labels .event-badge__content-row--h3 {
  font-weight: normal;
  --font-size-modifier: 1.9;
}

.event-badge--avery_5392_alt .event-badge__content-row--h3 {
  font-weight: bold;
  --font-size-modifier: 1.75;
}

.event-badge--basa .event-badge__content-row--h3 {
  font-weight: bold;
}

.event-badge--basa .event-badge__content-row--h3 > span {
  font-size: 14pt;
}

.event-badge__content-row--rest {
  --font-size-modifier: 0.75;
}

.event-badge--qr-false .event-badge__content-row--rest {
  --font-size-modifier: 1.15;
}

.event-badge__content-row--rest small {
  line-height: 1.5em;
}

.event-badge__association-img {
  position: absolute;
  padding: 0;
  top: var(--gutter);
  left: var(--gutter);
  width: var(--association-img-h);
  height: var(--association-img-h);
}

.event-badge__association-img--secondary {
  margin-left: calc(var(--association-img-h) - 8px);
}

.event-badge__association-img > div {
  border-radius: 50%;
  overflow: hidden;
}

.event-badge__association-img img {
  height: auto;
  padding: 0em;
}

.event-badge__association-img.event-badge__association-img--has-triangle-true
  img {
  padding: 0.05em;
}

.event-badge--has-secondary-logo
  .event-badge__association-img.event-badge__association-img--has-triangle-true
  img {
  padding: 0.05em;
}

.event-badge--org-nada
  .event-badge__association-img.event-badge__association-img--has-triangle-true
  img {
  padding: 0.085em;
  padding-top: 0.1em;
}

.event-badge--basa .event-badge__association-img {
  top: 0;
  left: 4%;
  width: 40%;
  height: 50%;
}

.event-badge--avery_5392_alt .event-badge__association-img {
  left: unset;
  top: calc(var(--association-img-h) * -0.3);
}

.event-badge__qr {
  position: absolute;
  left: 50%;
  margin-left: calc(var(--qr-h) / -2);
  width: var(--qr-h);
  height: var(--qr-h);
  top: var(--gutter);
  z-index: 2;
}

.event-badge--labels .event-badge__qr {
  position: relative;
  left: unset;
  top: unset;
  margin: 0;
  margin-top: var(--gutter);
}

.event-badge__bg-white--shadow {
  overflow: visible;
  transform: scale(1.2);
  top: 4.5% !important;
}

.event-badge__qr img {
  padding: calc(var(--gutter) / 2);
}

.event-badge__qr img.no-padding {
  padding: 0;
}

.event-badge--variant-split .event-badge__qr {
  right: var(--gutter);
  left: unset;
}

.event-badge--avery_5392_alt .event-badge__qr {
  position: absolute;
  top: calc(
    (var(--badge-h) - var(--padding-top)) / 2 + var(--padding-top) -
      var(--qr-h) / 2
  );
  left: calc(var(--gutter));
  margin-left: 0;
}

.event-badge__grid--avery_8520 .event-badge__qr {
  position: absolute;
  top: calc(var(--gutter) * 6);
}
.event-badge--avery_8520 .event-badge__content {
  padding-top: calc(var(--gutter) * 12);
  padding-bottom: var(--bottom-section-h);
}

.event-badge--avery_8520.event-badge--triangle-false .event-badge__content {
  padding-top: calc(var(--gutter) * 8);
}

.event-badge__bottom-right {
  position: absolute;
  bottom: calc(var(--ticket-h) * 2);
  right: 0;
  padding: var(--gutter);
}
.event-badge__bottom {
  position: absolute;
  bottom: calc(var(--gutter) * 3 + var(--ticket-h) * 2);
  left: calc(var(--gutter) * 1);
  right: calc(var(--gutter) * 1);
}
.event-badge__bottom-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--gutter) * 1);
}
.event-badge__bottom-container > .event-badge__bg-square {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.event-badge__bottom-w-text {
  z-index: 1;
  display: block;
  height: 0.23em;
  width: auto;
}
.event-badge__bottom-container > div {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  z-index: 1;
  text-transform: uppercase;
  font-weight: bold;
  font-size: calc(var(--font-size) * 1.5);
  color: white;
}
.event-badge__ff-logo {
  width: calc(var(--badge-w) * 0.3);
  height: auto;
  display: block;
}
.event-badge__bottom-left {
  position: absolute;
  bottom: calc(var(--ticket-h) * 2);
  left: 0;
  padding: var(--gutter);
}

.event-badge__content {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-flow: column;
  align-items: center;
  padding: 20% var(--gutter) 2%;
  z-index: 1;
}

.event-badge__grid--is-pre-print-true .event-badge__content,
.event-badge__grid--is-pre-print-true .event-badge__qr img,
.event-badge__grid--is-pre-print-true .event-badge__bottom-container {
  opacity: 0;
}
.event-badge__grid--is-pre-print-true .event-badge--back-side {
  display: none !important;
}
.event-badge__grid--is-onsite-print-true .event-badge__bg-half-clip-triangle-v2,
.event-badge__grid--is-onsite-print-true .event-badge__association-img,
.event-badge__grid--is-onsite-print-true .event-badge__bg-white,
.event-badge__grid--is-onsite-print-true .event-badge__ff-logo {
  opacity: 0;
}
.event-badge__grid--is-onsite-print-true.event-badge__grid--avery_5392_alt
  .event-badge__qr
  .event-badge__bg-white {
  opacity: 1;
}

/* Hide back-side badges on screen. Back badges are marked with .event-badge--back-side class. */
@media screen {
  .event-badge__grid--is-double-sided .event-badge--back-side {
    display: none !important;
  }
}

.event-badge__content h1,
.event-badge__content h2,
.event-badge__content h3,
.event-badge__content h4,
.event-badge__content h5,
.event-badge__content h6 {
  margin: 0;
}

.event-badge--qr-true .event-badge__content {
  padding-top: calc(var(--gutter) + var(--qr-h));
}
.event-badge--avery_8520.event-badge--qr-true .event-badge__content {
  padding-top: calc(var(--gutter) * 6 + var(--qr-h));
}
.event-badge--avery_5392_alt.event-badge--qr-true .event-badge__content {
  padding-top: var(--padding-top);
  padding-left: calc(var(--qr-h) + var(--gutter) * 2);
  justify-content: center;
  gap: 0.075em;
}

.event-badge--basa .event-badge__content {
  padding-top: 25%;
  padding-bottom: 3%;
}

.event-badge--labels .event-badge__content {
  padding-top: var(--gutter);
  padding-bottom: var(--gutter);
  justify-content: space-between;
}

.event-badge--custom .event-badge__content {
  padding: 21em 2em 2em 2em;
  display: block;
}

.event-badge__org-title {
  position: absolute;
  top: 0;
  left: calc(var(--qr-h) + var(--gutter) * 1);
  right: calc(var(--gutter) * 4);
  height: calc(var(--qr-h) * 0.75 + var(--gutter) * 0);
  padding: var(--gutter);
  color: var(--bg-color);
}

.event-badge__org-title > span {
  display: block;
  font-size: calc(var(--font-size) * var(--font-size-modifier) * 1.5);
  font-weight: bold;
}

.event-badge__top-right {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--gutter);
  display: flex;
  /* make it clickable */
  z-index: 1;
}

.event-badge__top-right > span {
  font-size: calc(var(--font-size) * var(--top-right-font-size-modifier));
}

.event-badge--dark-accent-true .event-badge__top-right {
  padding-top: calc(var(--gutter) + var(--qr-h) / 2);
}

.event-badge--triangle-true .event-badge__top-right {
  padding-top: calc(var(--gutter) + var(--qr-h) / 2);
}

.event-badge--qr-true .event-badge__top-right {
  padding-top: calc(var(--gutter) + var(--qr-h) / 2);
  max-width: calc(50% - var(--qr-h) / 2 - var(--gutter) / 2);
}

.event-badge--qr-false .event-badge__top-right {
  font-weight: bolder;
  text-transform: uppercase;
}

.event-badge--qr-false .event-badge__top-right > span {
  font-size: calc(var(--font-size) * 1.15);
}

.event-badge--variant-stacked-left .event-badge__content-row {
  text-align: left;
  justify-content: flex-start;
}

.event-badge--variant-stacked-left .event-badge__content-row--h2 {
  padding-right: var(--association-img-h);
}

.event-badge--variant-stacked-left .event-badge__content-row--rest {
  padding-right: var(--association-img-h);
}

.event-badge--variant-stacked-left .event-badge__association-img {
  left: unset;
  top: unset;
  bottom: var(--gutter);
  right: var(--gutter);
}

.event-badge--variant-stacked-left .event-badge__qr {
  left: var(--gutter);
  top: var(--gutter);
  margin-left: 0;
}

.event-badge--variant-split .event-badge__top-right {
  color: var(--color);
  right: unset;
  padding: var(--gutter);
  top: var(--gutter);
  left: calc(var(--association-img-h) + var(--gutter));
  height: var(--association-img-h);
  justify-content: flex-start;
  align-items: center;
  max-width: calc(100% - var(--qr-h));
}

.event-badge--triangle-true.event-badge--variant-split .event-badge__top-right {
  color: var(--bg-color);
}

.event-badge__sponsor-logos {
  position: absolute;
  top: calc(var(--gutter) + 4px);
  right: calc(var(--gutter) + 4px);
  display: flex;
  height: auto;
  flex-flow: row wrap;
  justify-content: space-around;
  gap: 0.05em;
  background: #ffffff;
  max-width: calc(100% - calc(var(--qr-h)) - calc(var(--gutter) * 4));
  border-radius: 0.01em;
  box-shadow: 0 0 2px 4px #ffffff !important;
}

.event-badge__sponsor-logos > img {
  font-size: calc(var(--font-size) * 1);
  width: auto;
  height: var(--sponsor-h);
  display: block;
  z-index: 1;
}

.event-badge__sponsor-logos .event-badge__bg-white {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}

.event-badge--variant-inverted-color
  .event-badge__sponsor-logos
  .event-badge__bg-white {
  fill: var(--bg-color) !important;
}

.event-badge__sponsor-logos-bg {
  width: 100%;
  height: 1px;
  overflow: visible;
  display: none;
}

.event-badge__ticket-items {
  width: 100%;
}
.event-badge__ticket-item {
  height: var(--ticket-h);
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 0.02em;
}
.event-badge__ticket-item > * {
  font-size: calc(var(--font-size) * var(--font-size-modifier) * 1);
}
.event-badge__ticket-item * {
  margin: 0;
  padding: 0;
}

@media print {
  .event-badge__sponsor-logos-bg {
    display: block;
  }

  #body-wrapper.event-badges-show {
    margin: 0;
  }

  #body-wrapper.event-badges-show #content {
    width: 100%;
    padding: 0;
    margin: 0;
    min-height: 0;
  }

  #body-wrapper.event-badges-show #content:after {
    display: none !important;
  }

  #body-wrapper.event-badges-show #content:before {
    display: none !important;
  }
}
.form-builder__loading {
  width: 100%;
  height: 40vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.form-builder__loading svg {
  width: 5em;
  height: 5em;
  display: block;
}

.form__modal-footer-submit-row {
  position: sticky;
  bottom: 0;
  border-top: 1px solid #e5e5e5;
  background-color: white;
  margin-bottom: -15px;
  padding: 15px;
}

.form-block__edit-container {
  position: relative;
}

.form-block__edit-container:before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  bottom: 0;
  left: -0.5rem;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: -1;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s;
  will-change: opacity;
}

.form-block__edit-container:has(:target) > .form-block__edit-controls {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

.form-block__edit-container:has(:target):before {
  opacity: 1;
}

@media (hover: hover) {
  .form-block__edit-container:hover > .form-block__edit-controls {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }

  .form-block__edit-container:hover:before {
    opacity: 1;
  }
}

.form-block__edit-controls {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

@media (hover: hover) {
  .form-block__edit-controls {
    transform: scale3d(1.15, 1.15, 1);
    transition: all 0.2s;
    opacity: 0;
  }
}

/* The `-22px` pull-ups here close the gap between an info module and the registration control that
   follows it, so the two read as one card. They were tuned to the WELL's box, which carries a 20px
   bottom margin; a `.mer__registration-field` is a `.form-group` with a 15px bottom margin and no
   box of its own, so it needs its own offset. Measured in the browser against MIAAA's 2027
   conference PD form: the well lands at -2px (the two boxes touch, which is the point), and -14px
   puts the field's question 6px under the card it asks about — grouped with it, and clearly apart
   from the next card 15px below. `:has()` keeps both rules on the block wrapper, where the margin
   has always lived, so there is no margin-collapsing change. */
.form-block__event_section_info_module
  + .form-block__event_section_registration:has(.mer__registration-well) {
  margin-top: -22px;
}
.form-block__event_section_info_module
  + .form-block__event_section_registration:has(.mer__registration-field) {
  margin-top: -14px;
}
.form-block__event_section_info_module
  + .form-block__event_section_registration
  h4 {
  display: none;
}

.form-block__event_section_info_module
  + .form-block__register_others_for_event_section {
  margin-top: -22px;
}

.form-block__event_info_module
  + .form-block__event_registration:has(.mer__registration-well) {
  margin-top: -22px;
}
.form-block__event_info_module
  + .form-block__event_registration:has(.mer__registration-field) {
  margin-top: -14px;
}
.form-block__event_info_module + .form-block__event_registration h4 {
  display: none;
}

/* Hide the "Register Others for Sub-Event" title if some already registered */
.form-block__register_others_for_event_section
  .mer__registered-section
  + .mer__register-section
  h4 {
  visibility: hidden;
}

/* hide empty member titles message */
.form-block__positions_and_workplace .member-title-v2__empty {
  display: none !important;
}

.form-block__register_others_for_event_section
  .mer__registered-section
  + .mer__register-section {
  margin-top: -22px;
}

/* Two stacked grey wells would otherwise show a double gap. Deliberately well-only: a
   `.mer__registration-field` is not a box, so pulling the "Register Attendee" panel up against the
   radios would crowd them — its own 15px bottom margin is already the right separation. */
.form-block__event_section_registration:has(.mer__registration-well)
  + .form-block__register_others_for_event_section {
  margin-top: -22px;
}

/* Drag and drop */

.form-block__drag-handle {
  cursor: grab;
}

.form-block__drag-handle:active {
  cursor: grabbing;
}

.form-block__dragging {
  opacity: 0.4;
}

.form-block__drop-before {
  border-top: 3px solid #337ab7;
}

.form-block__drop-after {
  border-bottom: 3px solid #337ab7;
}

.form-block__drop-into {
  background-color: rgba(51, 122, 183, 0.1);
  outline: 2px dashed #337ab7;
}

.fieldset__body {
  margin-bottom: 2rem;
}

/* Empty-state placeholder for the form's `lead` intro copy, shown at the top of the
   builder when the form has no lead set. The dotted outline marks the area the lead
   would occupy; the tooltip lives on this wrapper (see
   UniversalPresenterFormConcern#builder_lead_control_for). */
.form-builder__lead-placeholder {
  padding: 1.5rem;
  border: 1px dashed #ccc;
  border-radius: 3px;
  background-color: #fafafa;
  text-align: center;
}
.iv__container {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  padding: 1rem;
  justify-content: flex-start;
  align-items: center;
}

.widget-highchart {
  flex: 0 1 36rem;
  position: relative;
  margin-bottom: 0;
  overflow: hidden;
}

.widget-highchart__container {
  height: 30rem;
  padding: 0;
}

.highcharts-contextmenu {
  font-size: 16px !important;
}
.highcharts-contextmenu hr {
  margin: 0.5em 0 !important;
}

.highcharts-legend {
  font-size: 1.2em;
}

.highcharts-legend__dt {
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
}

.highcharts-legend__dd {
  font-size: 1.3em;
  font-weight: bold;
}

.highcharts-subtitle {
  font-weight: bold;
  width: 110px;
  padding-left: 10px;
  z-index: -1;
}

.highcharts-subtitle .highcharts-subtitle-metric {
  font-size: 3.2em;
  color: var(--text-color);
}

.highcharts-subtitle .highcharts-subtitle-label {
  font-size: 1.4em;
  font-weight: bold;
  color: #707070;
}

.highcharts__tooltip-link {
  display: inline-block;
  padding: 2px 6px;
  color: black;
  font-size: 1.4em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.highcharts__tooltip-link .glyphicon {
  font-size: 12px;
}

.highcharts__tooltip-link:active {
  background-color: #d0e6ff28;
}
#body-wrapper.import div.import_container {
  max-height: 1000px;
  overflow: auto;
}

#body-wrapper.import #failed_imports td.errors {
  min-width: 300px;
}

.events__event-details-container a.text-truncate {
  vertical-align: middle;
}

.events__event-details-line {
  margin-bottom: 0.3em;
}
.login__auth-separator {
  display: flex;
  flex-flow: row;
  justify-content: center;
  margin: 1.5em 0;
  position: relative;
}

.login__auth-separator:after {
  display: block;
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  top: 50%;
  background-color: #00000033;
}

.login__auth-separator-text {
  width: 3em;
  background: #f1f1f1;
  border-radius: 50%;
  height: 3em;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 1;
}

.login__auth-btns-container {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  flex-flow: column;
}

@media (min-width: 767px) {
  .login__auth-btns-container {
    padding-left: 16.6666666667%;
    padding-right: 35.3333333333%;
  }
}

.login__auth-btns-container > * {
  margin: 0.5em 0;
  width: 100%;
  justify-content: center;
}

.login__auth-section h5 {
  text-align: center;
  margin-bottom: 2em;
  font-weight: semi-bold;
}

.login__ff-auth-toggle {
  display: flex;
  flex-flow: column;
}

.login__ff-auth-toggle > * {
  margin-bottom: 0.5em;
}

.login__ff-auth-toggle.login__ff-auth-toggle--invalid > a {
  display: none;
}

.login__ff-auth-toggle:not(.login__ff-auth-toggle--invalid) > select {
  display: none;
}

@media (min-width: 992px) {
  .form__reduced-space .control-label {
    padding-right: 0;
  }

  .form__reduced-space .col-sm-offset-2 {
    margin-left: 25%;
  }

  .form__reduced-space .col-md-offset-2 {
    margin-left: 25%;
  }

  .form__reduced-space .col-md-2 {
    width: 25%;
  }

  .form__reduced-space .col-lg-1 {
    width: 15%;
  }

  .form__reduced-space .col-md-3 {
    width: 33.333%;
  }

  .form__reduced-space .col-md-4 {
    width: 33.333%;
  }

  .form__reduced-space .col-md-5 {
    width: 50%;
  }

  .form__reduced-space .col-md-6 {
    width: 60%;
  }

  .form__reduced-space .col-md-6.date-select {
    width: 70%;
  }
}

.promoted-vendors__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  grid-gap: 1em;
  justify-content: center;
  align-items: center;
}

.promoted-vendors__item {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.promoted-vendors__item img {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.promoted-vendors__item:active img {
  filter: grayscale(0%);
}

@media (hover: hover) {
  .promoted-vendors__item:hover img {
    filter: grayscale(0%);
  }
}
.mp,
.mp-profile__container {
  display: grid;
  grid-template-columns: 0.25fr 1fr;
  column-gap: 1rem;
  margin-top: 2.5rem;
  --column-gap: 1.5rem;
  --text-color: #555;
  --star-color: #fd4;
  --unfilled-star-color: #cdcdcd;
  --pro-color: hsl(0, 100%, 50%, 40%);
  --plus-color: hsl(207, 100%, 50%, 50%);
  --basic-color: hsl(120, 100%, 40%, 60%);
}

.mp--without-side-tiers-true,
.mp-profile__container--without-side-tiers-true {
  grid-template-columns: 1fr;
}

.mp--without-side-tiers-false > nav {
  grid-column: 2;
}

.mp-keys_container {
  margin-bottom: -1.5rem;
  --text-color: #555;
  --pro-color: hsl(0, 100%, 50%, 40%);
  --plus-color: hsl(207, 100%, 50%, 50%);
  --basic-color: hsl(120, 100%, 40%, 60%);
}

.mp-keys_container .keys-label {
  margin-bottom: 0.5rem;
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--text-color);
}

.mp-keys_container .keys-container {
  display: flex;
  flex-direction: row;
}

.mp-keys_container .keys .key {
  width: 2rem;
  height: 2rem;
}

.mp-keys_container .keys .key-legend {
  margin-right: 2.8em;
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
  border-radius: 2.75px;
  margin-bottom: 0.5rem;
}

.mp-keys_container .keys .key--pro {
  box-shadow: 0px 0px 4px var(--pro-color);
  border: 1px solid var(--pro-color);
  border-radius: 4px;
}

.mp-keys_container .keys .key--plus {
  box-shadow: 0px 0px 4px var(--plus-color);
  border: 1px solid var(--plus-color);
  border-radius: 4px;
}

.mp-keys_container .keys .key--basic {
  box-shadow: 0px 0px 4px var(--basic-color);
  border: 1px solid var(--basic-color);
  border-radius: 4px;
}

.mp-profile .toggle_description {
  color: var(--text-color);
}

.mp-profile.table-responsive {
  width: initial;
  overflow-x: visible;
}

.mp-profile__head {
  background-color: #fff;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
}

.mp-profile__content {
  column-count: 2;
  column-gap: var(--column-gap);
}

.mp-profile__about {
  color: var(--text-color);
  font-weight: 600;
}

.mp-profile__about-badges {
  display: grid;
  grid-template-columns: 0.08fr 1fr;
  align-items: baseline;
}

.mp-profile__about span {
  text-align: center;
}

.mp-profile__module-container {
  width: 100%;
  position: relative;
  break-inside: avoid;
  margin: 0;
}

.mp-profile__module-container--is-image-false {
  padding: 1.5rem;
}

.mp-profile__module-container--is-image-false:not(:last-child) {
  margin-bottom: var(--column-gap);
}

.mp-profile__module-container--module-avatar {
  font-size: 0.8rem;
}

.mp-profile__module-edit-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  transition: all 0.2s ease-in-out;
  backdrop-filter: blur(5px);
  border-radius: 4px;
}

@media (hover: hover) {
  .mp-profile__module-edit-container:hover {
    opacity: 1;
  }
}

.mp-profile__module-edit-container--is-overlay-false {
  opacity: 0;
}

.mp-profile__module-edit-container--is-overlay-true {
  backdrop-filter: blur(5px) contrast(0.85);
}

@media (hover: hover) {
  .mp-profile__module-edit-container--is-overlay-true:hover {
    backdrop-filter: blur(2px);
  }
}

.mp-profile__module-edit-container--is-image-true {
  backdrop-filter: blur(0) contrast(1);
}

.mp-profile__module-edit-link {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-decoration: none !important;
  --color: #286090;
  --bg-color: #e8e8e8cc;
}

.mp-profile__module-edit-link--is-image-true {
  --bg-color: #ffffffcc;
}

.mp-profile__module-edit-link--is-overlay-true {
  --bg-color: #286090;
  --color: #fff;
}

.mp-profile__module-edit-link--is-locked-true {
  --bg-color: #b30000cc;
}

.mp-profile__module-edit-link > div {
  padding: 0.6em;
  border-radius: 3px;
  background: var(--bg-color);
  color: var(--color);
}

.mp-profile__module-edit-link
  .mp-profile__module-edit-link-text--is-hover-true {
  display: none;
}

@media (hover: hover) {
  .mp-profile__module-edit-link:hover
    .mp-profile__module-edit-link-text--is-hover-true {
    display: inline;
  }

  .mp-profile__module-edit-link:hover
    .mp-profile__module-edit-link-text--is-hover-false {
    display: none;
  }
}

.mp-profile__module-edit-link:active {
  transform: scale(0.9);
}

.mp-profile__module-edit-link:active
  .mp-profile__module-edit-link-text--is-hover-true {
  display: inline;
}

.mp-profile__module-edit-link:active
  .mp-profile__module-edit-link-text--is-hover-false {
  display: none;
}

.mp-profile__module-edit-placeholder-link {
  color: #767676 !important;
  font-style: italic;
}

.mp-profile__module-edit-cta {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 1;
  color: var(--btn-primary-bg);
  font-weight: bold;
}

.mp-profile .header {
  display: grid;
  grid-template-columns: 0.25fr 1fr 0.5fr;
  padding: 1rem;
  column-gap: 1rem;
  border-top: 1px solid #e5e5e5;
}

.mp-profile .profile_item_title {
  margin: 0 0 1rem 0;
  font-weight: 600;
  z-index: 3;
  position: relative;
  pointer-events: none;
}

.mp-profile .media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.mp-profile .media .overlay-play-button__overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  align-items: center;
  display: flex;
  text-align: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.25);
  cursor: initial;
}

.mp-profile .media .overlay-play-button__play {
  color: #fff;
  cursor: pointer;
  background-color: red;
  border-radius: 25% / 100%;
  border: 0px solid #ececec;
  font-size: 1rem;
  height: 3rem;
  width: 4rem;
  align-items: center;
  display: flex;
  justify-content: center;
  opacity: 0.5;
  transition: all 0.2s ease-in-out;
}

.mp-profile .media .overlay-play-button__play:hover {
  opacity: 1;
  border: 1px solid #ececec;
}

.mp-profile .media .mp-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
}

.mp-profile .media .mp-thumbnail img {
  border-radius: 0.25em;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.mp-profile .media .mp-thumbnail__0 {
  grid-area: 1 / 1 / 2 / 4;
}

.mp-profile .media .mp-thumbnail__0 .overlay-play-button__play {
  height: 4rem;
  width: 6rem;
  font-size: 1.75rem;
}

.mp-profile .media .mp-thumbnail__1 {
  grid-area: 2 / 1 / 3 / 2;
}

.mp-profile .media .mp-thumbnail__2 {
  grid-area: 2 / 2 / 3 / 3;
}

.mp-profile .media .mp-thumbnail__3 {
  grid-area: 2 / 3 / 3 / 4;
}

.mp-profile .connect__row {
  display: grid;
  grid-template-columns: 0.25fr 1.5fr 0.5fr;
  align-items: center;
  column-gap: 0.5rem;
}

.mp-profile .promo,
.mp-profile .connect {
  display: grid;
  row-gap: 1rem;
}

.mp-profile .referrals__row {
  display: grid;
  grid-template-columns: 0.25fr 2fr;
  align-items: center;
}

.mp-profile .show-key-true-basic {
  border: 1px solid var(--basic-color);
  box-shadow: 0px 0px 10px var(--basic-color);
}

.mp-profile .show-key-true-pro {
  border: 1px solid var(--pro-color);
  box-shadow: 0px 0px 10px var(--pro-color);
}

.mp-profile .show-key-true-plus {
  border: 1px solid var(--plus-color);
  box-shadow: 0px 0px 10px var(--plus-color);
}

.mp-card {
  display: flex;
  flex: 0 1 auto;
  padding: 1rem;
  gap: 1rem;
  border-top: 1px solid #e5e5e5;
  align-items: center;
  overflow: hidden;
}

.mp-card__badges {
  display: flex;
  padding: 0.5rem 0;
  gap: 0.5rem;
}

.mp-card__info {
  align-items: flex-start;
  flex: 1;
  height: 7.4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1rem;
  overflow: hidden;
}

.mp-card__name {
  font-size: 2rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-flow: row wrap;
  column-gap: 1rem;
  white-space: normal;
}

.mp-card__name a {
  color: black;
}

.mp-card__tagline {
  font-size: 1.1rem;
  color: #737373;
  margin: 0;
  width: calc(99%);
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-card__tagline a {
  color: #737373;
}

.mp-card__img {
  --doc-img-width: 7.5rem !important;
  flex: 0 0 var(--doc-img-width);
}

.mp-card__img--is-listing-true .mp-profile__module-edit-container {
  display: none;
}

.mp-card__img--is-listing-true .mp-profile__module-edit-cta {
  display: none;
}

.mp-card__rating-container {
  display: flex;
  align-items: baseline;
  column-gap: 0.5rem;
}

.mp-card__rating-container .review-info {
  font-size: 1.25rem;
  color: #737373;
}

.mp-card__rating-container .ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: var(--unfilled-star-color);
}

.mp-card__rating-container .full-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: var(--star-color);
}

.mp-card__rating-container .empty-stars:before,
.mp-card__rating-container .full-stars:before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 1.75rem;
}

.mp-card__rating-container label {
  margin: 0;
}

.mp-card__rating-container label.star {
  color: var(--unfilled-star-color);
  transition: all 0.2s;
  cursor: pointer;
}

.mp-card__rating-container label.star:hover {
  transform: scale(1.2);
}

.mp-card__rating-container label.star:before {
  content: "\2605";
}

.mp-card__rating-container input.star {
  display: none;
}

.mp-card__rating-container input.star:hover ~ label.star:before {
  color: #3b79f9;
  transition: all 0.25s;
}

.mp-card__rating-container input.star:checked ~ label.star:before {
  content: "\2605";
  color: var(--star-color);
  transition: all 0.25s;
}

.mp-card__contact {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  justify-content: space-evenly;
  justify-items: center;
  align-items: center;
  padding: 0 1rem;
  margin: 0;
  gap: 0.5rem;
}

.mp-card__contact .learn-more {
  display: flex;
  flex: 0;
}

.module-badges {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
}

.module-badge {
  justify-items: start;
  align-items: center;
}

.module-badge-is-key-true {
  display: grid;
  grid-template-columns: 0.1fr 1fr;
  justify-items: center;
}

.module-badge-is-key-false {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.connect_container {
  display: flex;
  justify-content: flex-end;
}

.connect_container .connect__contact-btn {
  background-color: #151515;
}

.banner {
  aspect-ratio: 3;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  width: 100%;
}

.conference-checklist {
  padding: 1rem 0;
  margin: 2rem 0.25rem;
  flex-direction: row;
  display: flex;
  row-gap: 1rem;
  justify-content: center;
}

.conference-checklist--section {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0 2rem;
}

.conference-checklist .label {
  padding: 0.2em 0.3em;
  margin-top: 0.25rem;
}

.conference-checklist--item {
  flex: 1;
  display: flex;
  row-gap: 1rem;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
}

.conference-checklist--item:not(:last-child) {
  border-bottom: none;
  border-right: 1px solid #e5e5e5;
}

.conference-checklist h3 {
  margin: 1rem 0;
}

.star {
  font-size: 1.75rem;
  color: var(--star-color);
}

.star-unfilled {
  color: #cdcdcd;
}

.star:before {
  content: "\2605";
}

.circle {
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  padding: 0.7rem;
  font-size: 1.25rem;
}

.btn.circle:hover {
  color: white;
}

a.circle:hover {
  opacity: 0.8;
}

.circle .glyphicon-phone {
  font-size: 1.5rem;
}

.circle .glyphicon-envelope {
  top: 0.5px;
}

.circle .glyphicon-globe {
  top: 0.25px;
}

.circle {
  height: 35px;
  width: 35px;
}

.circle.sm-circle {
  height: 25px;
  width: 25px;
  background-color: #6d6d6d;
}

.pricing-plan {
  border-radius: 2.5rem;
  overflow: hidden;
  margin: 1rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

.pricing-plan__list {
  padding: 0;
}

.pricing-plan__title {
  font-weight: 400;
}

.pricing-plan__feature {
  list-style: none;
}

.pricing-plan__summary {
  font-weight: 300;
}

.pricing-plan__description {
  padding: 2rem;
}

.pricing-plan__button {
  padding: 0.8rem 2rem;
}

.pricing-plan__title,
.pricing-plan__list,
.pricing-plan__cost {
  margin: 0;
}

.pricing-plan__header,
.pricing-plan__actions {
  padding: 2.5rem;
}

.pricing-plan__actions {
  border-bottom: 1px solid #e5e5e5;
}

.pricing-plan__title,
.pricing-plan__button {
  text-transform: uppercase;
}

.pricing-plan__feature:not(:last-child) {
  margin-bottom: 0.5em;
}

.pricing-plan__text,
.pricing-plan__title,
.pricing-plan__summary,
.pricing-plan__cost {
  text-align: center;
}

.pricing-plan__header {
  height: 12.5rem;
  background-color: #c01b21;
  color: #ffffff;
}

.pricing-plan__cost {
  font-weight: 500;
  font-size: 2rem;
}

.pricing-plan-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
}

.side-tiers_container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.side-tier {
  display: grid;
  padding: 1.5rem;
  max-height: 100em;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: auto;
}

.side-tier,
.side-tier a {
  color: var(--text-color);
  font-weight: 500;
  text-decoration: none !important;
}

.side-tier__avatar {
  --doc-img-width: 3rem !important;
  flex-shrink: 0;
  width: 3.5rem;
}

.side-tier__vendors {
  display: flex;
  row-gap: 0.5rem;
  flex-direction: column;
}

.side-tier__vendors--pro {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}

.side-tier__vendor {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

.side-tier__vendor-name {
  font-weight: 600;
  width: 100%;
  padding-left: 0.5rem;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.side-tier__vendor-name:hover {
  background-color: #f5f5f5;
  border-radius: 0.5rem;
}

.side-tier__label {
  margin-bottom: 0.5rem;
  font-size: 1.65rem;
  font-weight: 600;
}

.side-tier.panel {
  margin-bottom: 0;
}

.mp-profile .show-key-true-basic,
.side-tier .show-key-true-basic {
  border: 1px solid var(--basic-color);
  box-shadow: 0px 0px 10px var(--basic-color);
}

.mp-profile .show-key-true-pro,
.side-tier .show-key-true-pro {
  border: 1px solid var(--pro-color);
  box-shadow: 0px 0px 10px var(--pro-color);
}

.mp-profile .show-key-true-plus,
.side-tier .show-key-true-plus {
  border: 1px solid var(--plus-color);
  box-shadow: 0px 0px 10px var(--plus-color);
}

.task-list {
  --border-color: #ddd;
  --cell-gap: 1rem;
  --double-cell-gap: calc(var(--cell-gap) * 2);
  --half-cell-gap: calc(var(--cell-gap) / 2);
}

.task-list__image {
  flex: 0 1 auto;
  max-width: 7.5rem;
}

.task-list--is-table-view-true .task-list__image {
  max-width: 4.5rem;
}

.task-list__container--is-table-view-true {
  background: white;
  border: 1px solid var(--border-color);
  border-bottom: none;
}

.task-list__item {
  display: flex;
  gap: var(--cell-gap);
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
  display: flex;
  position: relative;
}

.task-list__item.panel {
  padding: var(--cell-gap);
}

.task-list__item--is-table-view-true {
  border-bottom: 1px solid var(--border-color);
  padding: var(--cell-gap);
  padding-right: var(--double-cell-gap);
}

@media (max-width: 767px) {
  .task-list__item {
    flex-flow: column;
  }
}

.task-list__item--status-completed {
  background-color: #dff0d8;
}

.task-list__item--status-completed:hover {
  background-color: #d0e9c6;
}

.task-list__item--status-ignored {
  background-color: #eee;
}

.task-list__item-actions {
  display: flex;
  justify-content: space-between;
}

.task-list__item-actions a {
  width: 100px;
}

.task-list__item-times {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.task-list__item-info {
  flex: 1;
  display: flex;
  gap: var(--half-cell-gap);
  flex-flow: column;
}

.task-list__item-info > * {
  margin: 0;
}

.task-list__item-cap {
  display: flex;
  gap: var(--half-cell-gap);
}

.task-list--is-table-view-true .task-list__item-cap {
  flex-direction: column;
}

@media (min-width: 767px) {
  .task-list__item-cap {
    align-items: flex-end;
  }
}

.task-list__ignore-btn {
  font-weight: bold;
  opacity: 0.2;
  color: #000;
  position: absolute;
  padding: 1rem;
  right: -0.6rem;
  top: -0.6rem;
  height: 4rem;
  display: block;
  line-height: 1rem;
  font-size: 2.1rem;
}

.task-list__ignore-btn:active {
  opacity: 0.8;
  text-decoration: none;
}

@media (hover: hover) {
  .task-list__ignore-btn:hover {
    color: #000;
    opacity: 0.6;
    text-decoration: none;
  }
}

@media (max-width: 767px) {
  .task-list__ignore-btn {
    top: 0;
    right: 0;
  }

  .task-list__item-actions {
    justify-content: center;
  }

  .task-list__item-info {
    align-items: center;
  }

  .task-list__item-title,
  .task-list__item-details {
    text-align: center;
  }

  .conference-checklist {
    flex-direction: column;
  }

  .conference-checklist--item:not(:last-child) {
    border-bottom: 1px solid #e5e5e5;
    border-right: none;
  }

  .mp-profile__content {
    column-count: 1;
  }

  .mp-card__content {
    display: grid;
  }

  .mp-card__contact {
    flex-flow: column;
  }

  .mp-card__name {
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 1.75rem;
  }

  .mp-card__main {
    grid-template-columns: 1fr;
  }

  .mp-card__main__info {
    text-align: center;
    justify-items: center;
    align-items: flex-start;
  }

  .mp-card__main__contact {
    border-top: 1px solid #e5e5e5;
    padding-top: 1rem;
    margin: 0;
  }
}

@media (max-width: 1199px) {
  .side-tiers_container {
    grid-row: 2;
  }

  .mp,
  .mp-profile__container {
    grid-template-columns: 1fr;
  }

  .mp-profile {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
  }

  .mp-profile .table-responsive {
    margin-right: 0;
    margin-left: 0;
  }
}

.vendor-marketplace__show-search {
  background-color: #fafafa;
  background-image: linear-gradient(to top, #fafafa, #efefef);
  border: 0;
  padding: 8px;
  border-bottom: 1px solid #dddddd;
}

.vendor-marketplace__show-search--is-enabled-false {
  pointer-events: none;
  opacity: 0.5;
}

.vendor-marketplace__filter-bar {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}

.vendor-marketplace__filter-bar > input {
  flex: 1;
  font-weight: bold;
}

.trophy_container {
  width: 33.33%;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 1rem;
}

.trophy_base {
  padding: 0.5rem;
  border: 4px solid black;
  border-radius: 2px;
}

.trophy_stand {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.tier_title {
  text-align: center;
  margin-top: 3rem;
  font: 900 2.25rem Overpass;
  background-color: rgba(0, 0, 0, 0.5);
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

.trophy_stand_top {
  width: 110%;
  height: 1rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.tier_price {
  color: black;
  font-size: 2rem;
  font-weight: 600;
}

.preview_listing {
  font-weight: 500;
  text-decoration: underline;
}

.tier_bullet {
  font-size: 1.25rem;
  color: black;
  font-weight: 500;
}

.preview-mode {
  position: sticky;
  text-align: center;
  bottom: 0;
  z-index: 5;
  padding: 1rem;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  margin: 2rem calc(50% - 48vw);
}

.preview-mode--buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (max-width: 991px) {
  .preview-mode--buttons {
    flex-direction: column;
  }
}

.join-mp-terms {
  background: white;
  border: 1px solid #e3e3e3;
  display: flex;
  padding: 2rem;
  align-items: center;
  flex-direction: column;
}

.join-mp__module {
  box-shadow: 0px 2px 5px 3px #00000026;
  max-width: 90rem;
  margin: 0 auto;
}

.join-mp__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}

.join-mp__tier {
  flex: 1 0 auto;
  border: 1px solid #e3e3e3;
  background-color: #fff;
  display: flex;
  flex-flow: column;
}

@media (min-width: 991px) {
  .join-mp__tier--is-preferred-true {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 1;
    margin-top: -15px;
    margin-bottom: -5px;
    padding-bottom: 5px;
  }
}

.join-mp__tier__head__preferred {
  height: 21px;
  background-color: #333;
  margin: 0;
  color: #fff;
  margin: -1px -1px -5px -1px;
}

.join-mp__tier__body {
  flex: 1;
  text-align: left;
  padding: 1rem 7.5px;
}

.join-mp__tier__body__title {
  margin: 0;
}

.join-mp__tier__body__list-header {
  margin: 1rem;
}

.join-mp__tier__body__features {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.join-mp__tier__body__features__list {
  padding: 0 1rem;
  margin: 0;
}

.join-mp__tier__head__price {
  padding: 1rem 1.5rem;
  margin: 0;
  font-weight: bold;
  color: #333;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

.join-mp__tier__head__title {
  margin: 0;
  padding: 1rem 1.5rem;
}

.join-mp__tier__foot {
  padding: 1rem 1.5rem;
  border-top: 1px solid #ddd;
  color: #333;
  background-color: #fff;
}

.join-mp__single-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  padding: 2rem 5%;
}

.join-mp__single-tier--marketing-emails,
.join-mp__single-tier--container {
  width: 100%;
  display: grid;
  margin: 1.5rem 0;
  gap: 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.join-mp__single-tier--card {
  background-color: var(--background-color);
  border-radius: 0.5rem;
  position: relative;
  padding: 1rem;
}

.join-mp__single-tier--card__check {
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--background-color);
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e5e5e5;
  border-radius: 100%;
}

.join-mp__marketing_emails {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 5%;
}

@media (max-width: 991px) {
  .join-mp-terms {
    margin-top: 2rem;
    text-align: center;
  }

  .join-mp__container {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }

  .join-mp__tier {
    border: 1px solid #a8a8a8;
  }

  .join-mp__tier__body__features {
    text-align: center;
  }

  .join-mp__tier__body__features__list {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .join-mp__single-tier {
    flex-direction: column;
    padding: 1rem;
  }

  .join-mp__single-tier--container {
    margin: 1rem 0 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .join-mp__single-tier--marketing-emails {
    grid-template-columns: 1fr;
  }
}

.homepage__vendor-task-list {
  max-width: 800px;
  margin: 0 auto;
}

.video-container {
  aspect-ratio: 16 / 9;
}

.video-container iframe,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
:root {
  --member-title-label-font-size: 0.9em;
  --member-title-select-font-size: 0.85em;
  --member-title-select-w: 104px;
  --member-title-checkbox-space-w: 20px;
  --member-title-gap: 20px;
  /* bootstrap checkbox w: */
  --member-title-checkbox-w: 13px;
  --member-title-checkbox-offset-h: 6px;
}

.member-title-v2__container {
  container-type: inline-size;
  container-name: member-title-container;
}

@media only screen and (max-width: 985px) {
  .member-title-v2__info {
    text-align: center;
  }
}

.member-title-v2__levels {
  top: calc(50% - 10px);
}

.member-title-v2__levels input[type="checkbox"] {
  top: calc(50% - var(--member-title-checkbox-offset-h));
  margin: 0;
  left: calc(
    (var(--member-title-checkbox-space-w) - var(--member-title-checkbox-w)) / 2
  );
}

.member-title-v2__levels label {
  margin: 0 !important;
  width: auto !important;
  font-size: var(--member-title-label-font-size);
  padding-left: var(--member-title-checkbox-space-w) !important;
}

.member-title-v2__sports select {
  max-width: var(--member-title-select-w) !important;
  width: var(--member-title-select-w) !important;
  min-width: unset !important;
  font-size: var(--member-title-label-font-size) !important;
  padding-left: 0.6em !important;
  padding-right: 0.6em !important;
}

/* Holds "Add Position" and, when there is anything to sync, the "Sync with Global" control beside it.
   Bootstrap 3's `.btn` carries NO margin and the presenter concatenates the two anchors with no
   whitespace between them, so without an explicit gap here the two buttons render flush against each
   other. `flex-wrap` is what keeps that from becoming an overflow on a narrow viewport — the second
   control drops to its own line instead. `align-items: center` is for the third state: when global has
   nothing to offer the sibling is a `.label` chip, not a button, and it would otherwise stretch to the
   button's full height. */
.member-title-v2__add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--member-title-gap);
}

/* The "In sync with Global" chip. This is the DOMINANT state, so it is deliberately quiet: a `.label`
   defaults to bold at 75% size, which next to a real button reads as an alert rather than an
   at-rest status.
   Note this tones down WEIGHT only, not hue — the chip is `label-success`, because every
   `glyphicon(:ok)`-in-a-label in this app is affirmative-coloured (see `member_presenter` around the
   membership-count chip, which picks `:success` vs `:default` on exactly this axis). `label-default`
   here is reserved for neutral metadata, so a grey chip carrying a ✓ reads as DISABLED. */
.member-title-v2__global-sync-status {
  font-size: var(--member-title-label-font-size);
  font-weight: normal;
}

/* One preview row inside the Sync-with-Global modal. The rows live in a `.list-unstyled` ul, which
   zeroes the list padding but leaves the items with no separation at all. */
.member-title-v2__global-sync-row {
  margin-bottom: 0.25em;
}

/* --- Sync-with-Global preview sections (Additions / Keeping / Removing) ---------------------------
   The green/grey/red comes from Bootstrap's own `panel-success` / `panel-default` / `panel-danger`
   heading colours (see the variant rationale on `global_sync_section`), so nothing here paints. What
   these rules do is buy back vertical space: a stock panel carries 20px of bottom margin and 15px of
   body padding, which is affordable on a page and not in a modal showing three of them. */
.member-title-v2__global-sync-section {
  margin-bottom: 1em;
}

.member-title-v2__global-sync-section .panel-body {
  padding: 0.75em 1em;
}

/* Workplace group: "Sync Demo High School" and the titles beneath it. Groups after the first need
   separating, but the first must not push itself off the panel-body's own padding. */
.member-title-v2__global-sync-group + .member-title-v2__global-sync-group {
  margin-top: 0.75em;
  border-top: 1px solid #eee;
  padding-top: 0.75em;
}

.member-title-v2__global-sync-workplace {
  margin: 0 0 0.35em;
  font-weight: bold;
}

.member-title-v2__global-sync-titles {
  margin-bottom: 0;
}

/* Only groups over the collapse threshold render a `<details>`; the summary is the comma-separated
   position labels. The default disclosure triangle is kept (it is the affordance), but the summary
   itself is muted so it reads as a stand-in for the list rather than as another heading. */
.member-title-v2__global-sync-collapse > summary {
  cursor: pointer;
  color: #777;
}

.member-title-v2__global-sync-collapse[open] > summary {
  margin-bottom: 0.35em;
}

/* --- Sync mode control ---------------------------------------------------------------------------
   The group's "Sync mode" label keeps `label_tag`'s default `col-sm-2`, so Bootstrap floats it into the
   usual form-row gutter; the options sit beside it. Each option is a [radio][name over hint] pair, and
   they carry a flex-basis so they wrap one-per-line rather than compressing their hints into a column
   of single words when the modal is narrow. */
.member-title-v2__global-sync-mode-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
}

/* `align-items: flex-start` because the radio must sit on the NAME's line, not in the middle of the
   two-line name+hint block. Bootstrap's `.radio-inline` absolutely positions its input into a 20px
   pad; this lays it out in normal flow instead. */
.member-title-v2__global-sync-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  padding-left: 0;
  flex: 1 1 240px;
}

.member-title-v2__global-sync-mode-option input[type="radio"] {
  position: static;
  margin: 0.25em 0 0;
  flex: none;
}

.member-title-v2__global-sync-mode-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.member-title-v2__global-sync-mode-name {
  font-weight: bold;
}

.member-title-v2__global-sync-mode-hint {
  font-weight: normal;
  white-space: normal;
}

/* The pair is a SECOND row inside the workplace form_group — a sibling div after the workplace
   control's own row, not another wrap-line of it — so without this it abuts at 0px while every
   comparable stacked row in the block is spaced (sibling `.form-group`s 15px; the Address group's
   address -> city/zip wrap-line 7px). `0.5em` is `flex-gap--05`'s own value, which is both that
   Address row-gap and the gap the pair's two selects use when they wrap apart on a narrow viewport.
   Keep the unit `em`, not rem: matching `flex-gap--05`'s unit is what keeps the two in step if the
   form's font-size ever changes. */
.member-title-v2__workplace-location {
  margin-top: 0.5em;
}

/* The position's Title control spans its column. A global `select.form-control { width: auto }` in
   universal.css otherwise sizes it to its longest option, which left "Athletic Director" occupying
   about half the row while every neighbouring control filled it. */
.member-title-v2__title-name > select.form-control,
.member-title-v2__title-name > .ts-wrapper {
  width: 100%;
  max-width: 100%;
}

@container member-title-container (max-width: 750px) {
  .member-title-fields__container--horizontal .form-group {
    --member-title-label-font-size: 0.75em;
    --member-title-select-font-size: 0.8em;
    --member-title-select-w: 88px;
    --member-title-checkbox-space-w: 17px;
    --member-title-checkbox-offset-h: 7px;
  }

  .member-title-fields__container--vertical .form-group {
    --member-title-select-font-size: 0.85em;
    --member-title-select-w: 100px;
  }

  .member-title-fields__container--horizontal .hidden-xs {
    display: none;
  }

  .member-title-v2__container--inline .radio-inline {
    font-size: 0.95em;
  }
  .member-title-v2__container--inline .col-md-8.col-sm-9 {
    width: auto !important;
  }
}
.mer__wrapper .tab-content {
  padding-top: 2rem;
}

.modal-body .modal-faux-footer {
  margin-bottom: 0;
  border-top: 1px solid #e5e5e5;
  padding-top: 15px;
}

.mer__identity-choice {
  margin: 0;
}
.mer__identity-choice [type="radio"] {
  margin: 0;
  padding: 0;
}
.mer__identity-choice__content small {
  font-weight: normal;
}
#body-wrapper.award-nomination.has-steps__true:not(.has-award--show):not(
    .current-step--1
  )
  .for-step--1 {
  display: none !important;
}

#body-wrapper.award-nomination.has-steps__true:not(.has-award--show):not(
    .current-step--2
  )
  .for-step--2 {
  display: none !important;
}

#body-wrapper.award-nomination.has-steps__true:not(.has-award--show):not(
    .current-step--3
  )
  .for-step--3 {
  display: none !important;
}

#body-wrapper.award-nomination.has-steps__true:not(.has-award--show):not(
    .current-step--4
  )
  .for-step--4 {
  display: none !important;
}

#body-wrapper.award-nomination:not(.has-award) .show-if-award-present {
  display: none !important;
}

.award-only--merit {
  display: none;
}

[data-award-slug="state_award_of_merit"] .award-not--merit {
  display: none !important;
}

[data-award-slug="state_award_of_merit"] .award-only--merit {
  display: block;
}

#body-wrapper.award-nomination a.color-inherit {
  color: inherit !important;
}

#body-wrapper.award-nomination a[disabled] {
  pointer-events: none;
  color: inherit !important;
}

#body-wrapper.award-nomination .pagination a[disabled] {
  color: #fff !important;
}

#body-wrapper:not(.has-award--show) .toggle-show-criteria__hidden {
  display: none !important;
}

#body-wrapper.has-award--show .toggle-show-criteria__visible {
  display: none !important;
}

#body-wrapper.has-award--show .nominations__footer [type="submit"] {
  display: none !important;
}

#body-wrapper.has-award--show input,
#body-wrapper.has-award--show textarea,
#body-wrapper.has-award--show select {
  pointer-events: none;
}

.hidden-on-invited-coeditor {
  display: none !important;
}

.hidden-unless-invited-coeditor {
  display: none !important;
}

/* Co-editor note in the universal personal-info form section. The
   `coeditor-invited--true` class is the JS/CSS state hook; this rule carries
   the layout/visibility (padding-left: 20rem; display: none) the old partial
   expressed as an inline style. */
.coeditor-invited-note {
  padding-left: 20rem;
  display: none;
}

#fields-for-nominee.invited-coeditor .hidden-on-invited-coeditor {
  display: block !important;
}

#fields-for-nominee:not(.invited-coeditor) .hidden-unless-invited-coeditor {
  display: block !important;
}

#coeditor-invited--green {
  transition: all 0.2s ease-in-out;
}

.home-page__actions-container td:not(.action) {
  min-width: 13rem;
}

@media (max-width: 767px) {
  .home-page__actions-container table {
    max-width: 40rem;
  }
}

.home-page__actions-container .action {
  text-align: right;
}

@media print {
  #body-wrapper.award-nomination-show .main-title {
    display: none;
  }

  #body-wrapper.award-nomination-show .main-title__divider {
    display: none;
  }
}

.awards-show__file-list > li {
  padding: 0.5rem 0;
}

.awards-show__signature-prompt {
  position: sticky;
  bottom: 0;
  margin: 2rem 0;
  box-shadow: 0px -4px 4px 0px #3232322e;
  z-index: 2;
}

.sectioned-award__signature-prompt-footer {
  max-width: 1170px;
  margin: 0 auto;
}

.nominations__footer {
  padding: 2rem 0;
  position: sticky;
  bottom: 0;
  background: var(--background-color);
  box-shadow: 0px -4px 4px -4px #3232322e;
  z-index: 2;
}

.niaaa-award-nomination__info-container h2 {
  margin-top: 0;
  margin-bottom: 0;
}

.awards-show__evaluation-section > ol {
  padding-top: 1rem;
}

.awards-show__evaluation-section > *:last-child {
  padding-top: 1rem;
}

.awards-show__evaluation-section input[type="number"] {
  max-width: 17rem;
  width: 17rem;
}

.awards-show__evaluation-section select {
  max-width: 19rem;
}

.sectioned-award-item {
  margin-bottom: 2rem;
}

.sectioned-award-item__add-document {
  margin-top: 1rem;
}

.sectioned-award-item__nomination-response-section-value-body {
  font-size: 1.4rem;
}

.sectioned-award-item__nomination-response-section-rich-text-label.flex,
.sectioned-award-item__evaluation-response-input.flex {
  padding-top: 1rem;
}

.sectioned-award-item__legend {
  font-size: 2.75rem;
}

.sectioned-award-item__sub-legend {
  font-size: 2.1rem;
}

.sectioned-award-item--category-document_example {
  padding: 19px;
  background-color: #f5f5f5;
  border: 1px dashed #e3e3e3;
  border-radius: 4px;
}

.sectioned-award-item--category-evaluation_range,
.sectioned-award-item--category-evaluation_selection,
.sectioned-award-item--category-evaluation_section_summary {
  color: #31708f;
  background-color: #d9edf7;
  border: 1px solid #bce8f1;
  border-radius: 8px;
  padding: 1.25rem 1.5rem 1.5rem;
  box-shadow: 0 1px 3px rgb(49 112 143 / 0.12);
}

.sectioned-award-item__evaluation-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.sectioned-award-item__evaluation-criterion-title {
  flex: 1 1 auto;
  min-width: min(100%, 14rem);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.sectioned-award-item__evaluation-response-input.flex-flow--column select,
.sectioned-award-item__evaluation-response-input.flex-flow--column
  input[type="number"] {
  width: 100%;
  max-width: 100%;
}

.sectioned-award-item--category-evaluation_range
  .form-group
  textarea.form-control,
.sectioned-award-item--category-evaluation_selection
  .form-group
  textarea.form-control,
.sectioned-award-item--category-evaluation_section_summary
  .form-group
  textarea.form-control {
  padding: 0.85rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  resize: vertical;
}

.sectioned-award-item--category-evaluation_range .well,
.sectioned-award-item--category-evaluation_selection .well,
.sectioned-award-item--category-evaluation_section_summary .well {
  margin-top: 1rem;
  margin-bottom: 0;
  padding: 1rem 1.15rem;
  font-size: 1.3rem;
  line-height: 1.55;
  background-color: #fff;
  border: 1px solid #bce8f1;
  border-radius: 6px;
}

.identity-fields__preferred-name input {
  min-width: 15rem;
  max-width: 20rem;
  flex: 1;
}

.identity-fields__name input {
  min-width: 15rem;
  max-width: 20rem;
  flex: 1;
}

.identity-fields__name input[id$="middle_name"] {
  min-width: 5rem;
  max-width: 7rem;
}

.nomination_label {
  font-size: 1.25rem !important;
}

.form-group__workplace [type="text"] {
  width: 32rem;
}

.form-group__workplace [autocomplete="postal-code"] {
  width: 5em;
}

.form-group__workplace [autocomplete="address-level1"] {
  width: 5em;
}

.form-group__workplace [autocomplete="country"] {
  width: 5em;
}

.form-group__workplace select.form-control {
  max-width: 5em;
  min-width: unset;
}

.form-group__workplace-default-text {
  position: absolute;
  display: none;
  top: -1rem;
  left: 2.7rem;
  z-index: 1;
  pointer-events: none;
  color: #999;
}

#payment-form .has-zoom-spinner__spinner {
  bottom: 5rem;
}

#payment-form hr {
  margin: 1.5rem 0;
}

#link-authentication-element {
  display: none !important;
}

.checkout-fees-table__stripe-choices .control-label {
  padding-top: 0 !important;
}

/*****************************/
/**     VIEW MODE STYLES    **/
/*****************************/

#nomination-sections-container {
  float: right;
  width: 65%;
}

.award-nomination--evaluation-evaluator-name {
  min-width: 11rem;
}
.award-nomination--evaluation-score {
  width: 10%;
}
.award-nomination--no_documents {
  padding-left: 2.5rem;
}

.award-nomination--nomination-response-documents {
  border-top: 1px solid #ddd;
  padding: 0 1.5rem;
}

.award-nomination--nomination_document {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

.award-nomination--document-item-container {
  border: 1px dashed #e5e5e5;
  border-radius: 5px;
  padding-left: 1rem;
  margin: 1rem 0;
}

.award-nomination--section:not(:first-child) {
  margin-top: 2rem;
}

.award-nomination--divider {
  border-bottom: 1px solid var(--border-color);
  margin: 1rem 0;
}

@media print {
  a[href]:after {
    content: none !important;
  }

  #nomination-sections-container {
    float: none;
    width: 100%;
  }
}

@media (max-width: 767px) {
  #nomination-sections-container {
    width: 100%;
  }
}

@media (max-width: 1199px) {
  #nomination-sections-container {
    padding: 1.5rem;
  }
}

/* Award Certificate Viewer */
.certificate-viewer__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 20rem;
  margin: auto;
}

.certificate-inline {
  position: relative;
  width: 80%;
  margin: 0 auto;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  background-color: #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
}

.certificate-inline svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.certificate-inline__content {
  position: relative;
  z-index: 1;
  padding: 18% 5% 5%;
}

.certificate__school-nominee-name {
  font-size: 4.5rem;
}

#body-wrapper.body__hide-layout--true .certificate-inline {
  width: 100%;
  margin: 0;
  box-shadow: none;
}

@media print {
  #body-wrapper[class*="nominations-certificate"] #content {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .certificate-inline {
    width: 100%;
    box-shadow: none;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

.document_notes details summary {
  list-style: none;
}

.document_notes details pre {
  margin: 10px 0;
}

.document_notes summary:after {
  content: "▸";
  transition: transform 0.2s ease-out;
  display: inline-block;
  margin-left: 1rem;
}

.document_notes details[open] summary:after {
  transform: rotate(90deg);
}

.document_notes .document_notes--comment {
  margin: 1rem 0 0 0;
  padding: 1rem;
  border-radius: 3.5px;
  border: 1px solid #ddd;
}
.promo-component {
  background-color: black;
  background: var(
    --FF-Black-Gradient,
    radial-gradient(
      50.61% 38.4% at 32.28% 44.15%,
      rgba(0, 0, 0, 0.75) 0%,
      #000 100%
    )
  );
  color: white;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 991px) {
  .promo-component {
    align-items: flex-start;
  }
}

@media screen and (min-width: 991px) {
  .promo-component__promo-img {
    width: 150px;
    position: relative;
  }
}

.promo-component__promo-img img {
  width: 150px;
  position: absolute;
  top: -10px;
}

@media screen and (max-width: 991px) {
  .promo-component__promo-img img {
    right: 0;
    top: 70%;
    z-index: 0;
  }
}

@media screen and (min-width: 991px) {
  .promo-component__lead {
    max-width: 30rem;
    min-width: 15rem;
  }
}

.promo-component__lead svg {
  width: 20rem;
  max-width: 80vw;
}

@media screen and (min-width: 991px) {
  .promo-component__description {
    max-width: 30rem;
    min-width: 15rem;
  }
}

@media screen and (max-width: 991px) {
  .promo-component__cta {
    z-index: 1;
  }
}
.property-history__filter-wrap {
  margin-bottom: 1rem;
}

.property-history__summary {
  cursor: pointer;
}

.property-history__summary:hover {
  background-color: var(--state-muted-bg, #f5f5f5);
}

.property-history__caret {
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease-in-out;
}

.property-history__summary--open .property-history__caret {
  transform: rotate(90deg);
}

.property-history__count {
  margin-left: 0.5rem;
  font-weight: normal;
}

.property-history__changes {
  margin-bottom: 0;
}
.qr-code-scanning__container {
  --qr-code-scanning-color: #fff;
}
.qr-code-scanning__scanner {
  position: relative;
  width: 400px;
  max-width: 100%;
  padding-top: 1rem;
}
.qr-code-scanning__container button > * {
  pointer-events: none;
}
.qr-code-scanning__scanner-crosshair {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-code-scanning__scanner-crosshair svg {
  display: block;
  width: 70%;
  color: var(--qr-code-scanning-color);
}
.qr-code-scanning__scanner-maximize-btn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  color: white;
}
.qr-code-scanning__scanner-maximize-btn:hover {
  opacity: 0.3;
}
.qr-code-scanning__scanner-maximize-btn:active {
  opacity: 1;
}
.qr-code-scanning__scanner-minimize-btn {
  position: absolute;
  top: 2rem;
  right: 1rem;
  z-index: 1;
}
@keyframes minimize {
  0% {
    width: auto;
    font-size: 12px;
  }
  95% {
    font-size: 1px;
  }
  100% {
    font-size: 1px;
    display: none;
  }
}
.qr-code-scanning__container[data-qr-code-scanning-mode="on"]
  .qr-code-scanning__scanner-minimize-btn
  span {
  animation: minimize 0.4s ease-out forwards 3s;
  transition: all 0.2s ease-in-out;
}
.qr-code-scanning__scanner video {
  height: auto;
  width: 100%;
  max-width: 100%;
  max-height: 60vh;
  aspect-ratio: 4/3;
  display: block;
  background: #1a1b26ea;
  margin: 0;
  transition: all 0.2s ease-in-out;
}
.qr-code-scanning__scanner {
  position: relative;
}
.qr-code-scanning__scanner-message:empty {
  display: none;
}
.qr-code-scanning__scanner-actions {
  /* position: absolute;
  z-index: 2;
  top: 1.5rem;
  right: 1rem; */
  margin-bottom: 1rem;
}
.qr-code-scanning__container[data-qr-code-scanning-mode="off"]
  .qr-code-scanning__scanner-actions {
  display: none !important;
}
.qr-code-scanning__container[data-qr-code-scanning-mode="off"]
  .qr-code-scanning__scanner
  button {
  display: none !important;
}

.qr-code-scanning__container[data-qr-code-scanning-mode="on"]
  .qr-code-scanning__scanner-btns-container {
  display: none !important;
}

.qr-code-scanning__last-scan {
  margin-top: 1rem;
}

.qr-code-scanning__by-name {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  flex-flow: column;
  flex: 1;
  max-width: 100%;
}

.qr-code-scanning__by-name button {
  height: 3.4rem;
}

.qr-code-scanning__by-name input:invalid + button {
  display: none;
}

.qr-code-scanning__tab {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  position: relative;
}
.qr-code-scanning__controls {
  padding-top: 1rem;
}

.qr-code-scanning__tab-description {
  max-width: 40vw;
  flex: 0 0 40vw;
}
.qr-code-scanning__container[data-qr-code-scanning-miminized="true"]
  [data-action="expand"] {
  display: none !important;
}
.qr-code-scanning__container[data-qr-code-scanning-miminized="false"]
  [data-action="collapse"] {
  display: none !important;
}
.qr-code-scanning__container[data-qr-code-scanning-miminized="true"]
  .qr-code-scanning__scanner {
  position: fixed;
  width: 140px;
  z-index: 4;
  bottom: 11vh;
  right: 0;
}
.qr-code-scanning__container[data-qr-code-scanning-result="false"]
  [data-action="view"] {
  display: none !important;
}

@media (max-width: 768px) {
  .qr-code-scanning__scanner {
    margin: 0 auto;
  }
  .qr-code-scanning__tab-description {
    display: none;
  }
  .qr-code-scanning__tab--qr {
    display: block;
  }
  .qr-code-scanning__tab--qr video {
    aspect-ratio: 9/16;
  }
  .qr-code-scanning__scanner-btns-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qr-code-scanning__container[data-qr-code-scanning-mode="off"]
    .qr-code-scanning__scanner-crosshair {
    display: none !important;
  }
  .qr-code-scanning__scanner-actions {
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 768px) {
  .qr-code-scanning__by-name {
    flex-flow: row nowrap;
    max-width: 100%;
  }
}

/* badge printing */
/* .qr-code-scanning__container[data-qr-code-scanning-print-badges="true"]  */
.qr-code-scanning__badge {
  display: none !important;
}
@media print {
  .qr-code-scanning__badge {
    display: block !important;
  }
  .qr-code-scanning__last-scan {
    display: none !important;
  }
}
.has-zoom-spinner {
  position: relative;
}

.has-zoom-spinner__min-height {
  min-height: 35vh;
}

.has-zoom-spinner__spinner {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* needs to go above inputs which have z-index 2 */
  z-index: 3;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.has-zoom-spinner__spinner svg {
  position: sticky;
  top: calc(50% - 2.5rem);
  display: block;
  width: 5rem;
  height: 5rem;
  opacity: 0.7;
  background: #ffffff96;
  border-radius: 3px;
}

.modal-body .has-zoom-spinner__spinner {
  padding-top: 5rem;
}
.modal-body .has-zoom-spinner__spinner svg {
  top: unset;
}

.table-responsive.is-zooming tr > td {
  display: none;
}

.table-responsive.is-zooming table {
  margin-bottom: 0;
}

.table-responsive.is-zooming .has-zoom-spinner__spinner {
  display: flex;
  position: relative;
  height: 45vh;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 0;
}

/* button version: spinner should be absolutely positioned over button content and should fade out the content: */
.has-zoom-spinner-submit-btn,
.has-zoom-spinner-link {
  position: relative;
}
.has-zoom-spinner-submit-btn.is-zooming,
.has-zoom-spinner-link.is-zooming {
  color: transparent !important;
}
.has-zoom-spinner-submit-btn .has-zoom-spinner__spinner,
.has-zoom-spinner-link .has-zoom-spinner__spinner {
  padding: 0;
  margin: 0;
  align-items: center;
  backdrop-filter: none;
}
.has-zoom-spinner-submit-btn .has-zoom-spinner__spinner svg,
.has-zoom-spinner-link .has-zoom-spinner__spinner svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 85%;
  width: auto;
  background: transparent;
  opacity: 1;
  color: white;
  color: var(--btn-color);
}

form.searchable > .table-responsive {
  min-height: 60rem;
}

form.searchable > .table-responsive .filters .dropdown-menu {
  max-height: 50rem;
  max-height: min(50rem, 80vh);
  min-width: min(180px, 100vw);
  overflow: auto;
}

.filters
  .dropdown-menu
  .form-control.input-sm:not([type="date"]):not([type="datetime-local"]) {
  max-width: 45rem;
  width: 100%;
}

.column__filter-control {
  font-size: 0.8em;
  padding-right: 0;
}

.column__filter-control--short {
  width: 80px;
}

.column__searchable {
  padding-right: 0;
}

.table-responsive--expanding td {
  max-width: 40rem;
}

@media (min-width: 1140px) {
  .table-responsive--expanding {
    margin-left: calc(-1 * (100vw - 1140px) / 2);
    width: 100vw;
  }

  .table-responsive--expanding > table {
    width: auto;
    margin: 0 auto;
    min-width: 1140px;
  }

  .table-responsive--expanding > nav {
    display: flex;
    justify-content: center;
  }
}

table.table {
  background-color: #fff;
  border: 1px solid #ddd;
  /* Checkbox tables */
  /* Radio tables */
  /* Searchable tables only */
  /* specific tables */
}

table.table dl {
  margin-bottom: 0;
}

table.table dl dt {
  font-weight: normal;
}

table.table ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

table.table thead tr td,
table.table thead tr th,
table.table tbody tr td,
table.table tbody tr th {
  vertical-align: middle;
}

table.table thead tr td.conditions,
table.table thead tr td.statuses,
table.table tbody tr td.conditions,
table.table tbody tr td.statuses {
  white-space: nowrap;
}

table.table .admin-count,
table.table .member-count {
  width: 50px;
}

table.table .actions > .btn-toolbar {
  display: flex;
  justify-content: flex-end;
  flex-flow: row;
}

table.table .actions > .btn-toolbar > .btn-group {
  width: 100%;
}

table.table.table__max-height-55 tr {
  height: 55px !important;
}

table.table label i {
  font-weight: normal;
}

table.table.table-checklist td:first-child {
  width: 38px;
  text-align: right;
  white-space: nowrap;
}

table.table.table-checklist td[colspan]:first-child {
  width: 100%;
  text-align: left;
  white-space: normal;
}

table.table.table-checklist td.table-checklist__checkbox-td:first-child {
  padding: 0;
}

table.table.table-checklist td.table-checklist__checkbox-td:first-child > * {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

table.table.table-checklist
  td.table-checklist__checkbox-td:first-child
  > *
  input {
  margin: 0;
}

table.table.table-checklist label:not(.radio-inline) {
  width: 100%;
  cursor: pointer;
  margin-bottom: 0;
}

table.table.table-radiolist td:last-child {
  width: 130px;
}

table.table.table-radiolist tr[class*="helper"] td:first-child {
  padding-left: 2em;
}

table.table.table-radiolist tr[class*="helper"] label {
  font-weight: normal;
}

table.table.table-radiolist--extended td:last-child {
  width: 220px;
  text-align: right;
}

table.table.table-radiolist--extended td:last-child .form-control {
  margin-left: auto;
  max-width: 25em;
}

table.table.table-radiolist--extended td:first-child > * {
  padding: 0;
}

table.table.searchable,
table.table.unsearchable {
  font-size: 13px;
}

table.table.searchable tr.input-row,
table.table.unsearchable tr.input-row {
  background-color: #fafafa;
  background-image: linear-gradient(to top, #fafafa, #efefef);
  border: 1px solid #dddddd;
  border-radius: 2px 2px 0 0;
  box-shadow: none;
  height: 20px;
  margin-bottom: -1px;
}

table.table.searchable tr.input-row .break,
table.table.unsearchable tr.input-row .break {
  border-left: 1px solid #fcfcfc;
  border-right: 1px solid #dddddd;
  margin: -11px 10px -10px;
  padding: 11px 0 10px;
}

table.table.searchable tr.input-row.condensed select,
table.table.searchable tr.input-row.condensed input,
table.table.searchable tr.input-row.condensed .form-control,
table.table.unsearchable tr.input-row.condensed select,
table.table.unsearchable tr.input-row.condensed input,
table.table.unsearchable tr.input-row.condensed .form-control {
  font-size: inherit;
}

.finalforms-status-icon {
  font-style: italic;
  color: #eb1c24;
}

.table .statuses .label {
  margin-right: 2px;
  font-size: 1em;
  padding: 0.16em 0.4em;
}
.table .statuses .label > .glyphicon {
  font-size: 0.9em;
}
.table .status-filter__ul .label {
  font-size: 0.8em;
}

table.table.searchable .radio input[type="radio"],
table.table.searchable .checkbox input[type="checkbox"],
table.table.unsearchable .radio input[type="radio"],
table.table.unsearchable .checkbox input[type="checkbox"] {
  vertical-align: -2px;
}

@media (max-width: 768px) {
  table.table.searchable .checkbox,
  table.table.unsearchable .checkbox {
    padding-left: 2em;
  }
}

table.table.searchable .text-tiny,
table.table.unsearchable .text-tiny {
  font-size: 10px;
}

table.table.searchable tbody.filters .status-filter-li__custom,
table.table.unsearchable tbody.filters .status-filter-li__custom {
  white-space: nowrap;
}

table.table.searchable tbody.filters .status-filter-li__custom label,
table.table.unsearchable tbody.filters .status-filter-li__custom label {
  min-width: 4rem;
  font-size: 0.85em;
}

table.table.searchable tbody.filters .status-filter-li__custom input,
table.table.unsearchable tbody.filters .status-filter-li__custom input {
  max-width: none;
  width: auto;
}

table.table.searchable tbody.filters th.sports .button-select,
table.table.unsearchable tbody.filters th.sports .button-select {
  max-width: 100%;
}

table.table.searchable
  tbody.filters
  th.sports
  .button-select
  .button-select-text,
table.table.unsearchable
  tbody.filters
  th.sports
  .button-select
  .button-select-text {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}

table.table .member_count {
  width: 30px;
}

table.table .admin_count {
  width: 30px;
}

/* Any filter control in the combined filter cell (name filter, group select, etc.) gets the
 * dialed-in width — not just name inputs. Broadened from `[name*="name"]` since the filters are
 * tom-select (a `.form-control`) and other pinned filters live in this cell too. */
table.table .index-table__name-filter-container .form-control {
  min-width: 15rem;
  width: 20rem;
  max-width: 50vw;
}

table#members-searchable-table.table .name .dotted {
  border-bottom: 1px dashed #999;
  color: var(--text-color);
}

table#members-searchable-table.table .name,
table#members-searchable-table.table #email_name_matches {
  width: 180px;
}

table#members-searchable-table.table .other-groups {
  min-width: 140px;
}

table#members-searchable-table.table .actions {
  text-align: right;
  width: 215px;
}

#events-searchable-table .details {
  max-width: min(300px, 50vw);
}

@media (max-width: 1199px) {
  table#members-searchable-table.table .actions {
    min-width: 135px;
  }
}

table#vendors-searchable-table.table .primary-representative {
  width: 200px;
}

.searchable.table .service-category {
  max-width: 250px;
}

table#vendors-searchable-table.table .actions {
  min-width: 215px;
}

@media (max-width: 1199px) {
  table#vendors-searchable-table.table .actions {
    min-width: 180px;
  }
}

table#events-searchable-table.table .name .dotted {
  border-bottom: 1px dashed #999;
  color: var(--text-color);
}

table#events-searchable-table.table .actions {
  min-width: 170px;
  text-align: right;
}

table#events-searchable-table.table.events-members-searchable-table .name,
table#events-searchable-table.table.events-members-searchable-table
  #name_matches {
  width: auto;
}

table.table.members-show-unsearchable-table .superintendent {
  width: 230px;
}

table.table.members-show-unsearchable-table .principal {
  width: 230px;
}

table.table.members-show-unsearchable-table .address {
  width: 210px;
}

table.table.members-show-unsearchable-table .actions {
  width: 90px;
}

table.table.vendors-show-unsearchable-table .statuses {
  width: 60px;
}

table.table.vendors-show-unsearchable-table .address {
  width: 210px;
}

table.table.vendors-show-unsearchable-table .actions {
  width: 90px;
}

table.table.vendors-show-unsearchable-table.representatives .actions {
  width: 160px;
}

table.table.member-form-statuses-show-unsearchable-table .superintendent {
  width: 230px;
}

table.table.member-form-statuses-show-unsearchable-table .principal {
  width: 230px;
}

table.table.member-form-statuses-show-unsearchable-table .address {
  width: 200px;
}

table.table.member-form-statuses-show-unsearchable-table .actions {
  width: 90px;
}

table#member-payments-searchable-table.table .member,
table#member-payments-searchable-table.table #member_name_matches,
table#vendor-payments-searchable-table.table .member,
table#vendor-payments-searchable-table.table #member_name_matches {
  width: 150px;
}

.member-payments-index-totals {
  clear: right;
  margin-top: -68px;
  min-height: 72px;
}

.member-payments-index-totals__summary {
  margin: 0 0 0.5rem;
}

table#member-payments-searchable-table.table .vendor,
table#member-payments-searchable-table.table #vendor_name_matches,
table#vendor-payments-searchable-table.table .vendor,
table#vendor-payments-searchable-table.table #vendor_name_matches {
  width: 180px;
}

table#member-payments-searchable-table.table .payer,
table#member-payments-searchable-table.table #payer_name_matches,
table#vendor-payments-searchable-table.table .payer,
table#vendor-payments-searchable-table.table #payer_name_matches {
  width: 150px;
}

table#member-payments-searchable-table.table [id*="paid_at_"],
table#vendor-payments-searchable-table.table [id*="paid_at_"] {
  width: 150px;
  font-size: 0.85em;
  display: inline-block;
  letter-spacing: -0.3px;
  padding: 6px;
}

table#member-payments-searchable-table.table [id*="paid_at_"][type="text"],
table#vendor-payments-searchable-table.table [id*="paid_at_"][type="text"] {
  width: 105px;
}

table#member-payments-searchable-table.table .costs,
table#vendor-payments-searchable-table.table .costs {
  min-width: 200px;
}

table#member-payments-searchable-table.table .actions,
table#vendor-payments-searchable-table.table .actions {
  width: 100px;
}

table#member-payments-searchable-table.table
  input::-webkit-calendar-picker-indicator,
table#vendor-payments-searchable-table.table
  input::-webkit-calendar-picker-indicator {
  max-width: 11px;
}

table#state-districts-searchable-table.table .students,
table#state-districts-searchable-table.table .staff,
table#state-districts-searchable-table.table .schools {
  width: 50px;
}

table#state-districts-searchable-table.table #state_districts_state_eq {
  width: 90px;
}

table#mergeable-connected-accounts-searchable-table.table .actions {
  min-width: 140px;
}

table#mergeable-connected-accounts-searchable-table.table .reason {
  min-width: 240px;
  max-width: 300px;
}

table.table .status-filter__ul {
  padding: 0.5rem 0 0;
}

table.table .status-filter__ul > li {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

table.table .status-filter__ul > li:last-child {
  padding-bottom: 0.5rem;
}

/* Collapsible filter group (`StatusFilter#collapsed_filter_html`).
   `<details>` is not a legal child of `<ul>`, so the group is an `<li>` wrapping a `<details>`
   whose body is a nested `<ul>`. That nested list needs the browser's default list styling
   stripped — the outer `.status-filter__ul` gets its reset from Bootstrap's `.dropdown-menu`,
   which does not reach a descendant list. */
.status-filter__ul--nested {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The group row itself spans edge to edge (its `<summary>` carries the indent instead). One class
   more specific than the `> li` padding rule above, so it wins without `!important`. */
table.table .status-filter__ul > li.status-filter-li__collapse {
  padding-left: 0;
  padding-right: 0;
}

.status-filter-li__collapse > details > summary {
  cursor: pointer;
  padding: 0.3rem 1.2rem;
  font-weight: bold;
  user-select: none;
}

.status-filter-li__collapse > details[open] > summary {
  border-bottom: 1px solid rgba(3, 3, 3, 0.15);
}

.status-filter__ul--nested > li {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.default-table__table th:last-child,
.default-table__table td:last-child {
  text-align: right;
}

.default-table__table th:last-child > .btn-group:not(.flex),
.default-table__table th:last-child > .btn-toolbar:not(.flex),
.default-table__table td:last-child > .btn-group:not(.flex),
.default-table__table td:last-child > .btn-toolbar:not(.flex) {
  display: inline-block;
}

.status-filter-li__submit-btn {
  position: sticky;
  bottom: 0;
  background-color: white;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(3, 3, 3, 0.2);
  box-shadow: 0px -5px 5px -3px rgba(3, 3, 3, 0.2);
}

.status-filter-li__submit-btn > .btn-group {
  width: 100%;
}

.status-filter-li__submit-btn > .btn-group .btn {
  padding: 0.8rem !important;
}

@supports (-webkit-overflow-scrolling: touch) {
  [id*="paid_at_"][type="date"] {
    display: inline-flex !important;
  }
}

@media (max-width: 767px) {
  @supports (-webkit-overflow-scrolling: touch) {
    [id*="paid_at_"][type="date"] {
      font-size: 1em !important;
    }
  }
}

.table--empty .table {
  margin: 0;
}

td.fill {
  width: 100%;
}

#checkout-fees-table .amount {
  width: 100px;
}

.breakdown-table {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.breakdown-table__row--cost td:not(:first-child) {
  text-align: right;
}

.breakdown-table__row--cost td:last-child {
  width: 90px;
}

.breakdown-table__row--payment td:not(:first-child) {
  text-align: right;
}

.breakdown-table__row--paymenttd:last-child {
  width: 80px;
}

.search-reset.btn {
  padding: 0;
  width: 2.4em;
  height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-reset > * {
  pointer-events: none;
}

.cost__description {
  font-size: 0.875em;
  display: block;
  margin: 0;
}

.cost__description p:last-child {
  margin-bottom: 0;
}

/* Shared sizing for searchable-table multi-select filters ("secondary column
 * selects" / omni-boxes), applied by the `omnibox_filter` presenter helper. The
 * `.ts-wrapper` selector covers the Tom Select (ff-select) sites — Tom Select
 * copies the class off the original <select> onto its wrapper — while the bare
 * class covers the pre-init <select> itself.
 *
 * `width: 100%` lets the box fill its cell / flex space (without it a Tom Select
 * wrapper in a <td> collapses to its min-width). `min()` on both bounds keeps it
 * responsive-safe: the floor backs off below 28rem on a <31rem viewport, and the
 * cap is the smaller of 80vw and 45rem so it never exceeds the screen. (Root
 * font-size is 10px here, so 28rem = 280px, 45rem = 450px.) A per-site inline
 * `min-width` (mirrored onto the wrapper by propagateWidthConstraints) overrides
 * the floor. */
.index-table__secondary-filters-input,
.ts-wrapper.index-table__secondary-filters-input {
  width: 100%;
  min-width: min(28rem, 90vw);
  max-width: min(80vw, 45rem);
  flex-grow: 1;
}

/* Wide single-filter mode: clearsearch | Filters dropdown + pinned filter (left) | space |
   mass-actions (right). The pinned control gets a comfortable width; the !important resets
   defeat the .form-control.input-sm `width`/`max-width: 120px` cap Tom Select would
   otherwise keep. `.ts-wrapper` covers Tom Select (ff-select) pinned filters. */
.index-table__wide-filter-control {
  min-width: 22em;
}

.index-table__wide-filter-control > input,
.index-table__wide-filter-control > .ts-wrapper {
  width: 100% !important;
  max-width: none !important;
}

/* Searchable/AJAX multi-select status filters that live inside the "Filters" dropdown
 * (e.g. members' "Search Certifications & Credits" / "Search Position" / "Roles"). The
 * dropdown menu is content-sized, so these Tom Selects were pinned at an ad-hoc inline
 * `max-width: 300px` and long option chips overflowed / clipped at the right edge. Give
 * them a larger responsive width: it both widens the select AND expands the content-sized
 * dropdown so chips have room, growing fluidly from the floor up to the cap. Same
 * responsive `min()`/`vw` family as `.index-table__secondary-filters-input` — the floor
 * backs off below the width on a narrow viewport and the cap never exceeds 90vw, so
 * nothing overflows. (Root font-size is 10px here: 32rem = 320px, 44rem = 440px.)
 *
 * The `!important`s are load-bearing, not cosmetic: these selects carry `form-control`
 * (default) + `input-sm`, both of which Tom Select copies onto the `.ts-wrapper`, so the
 * base `.form-control.input-sm:not(textarea)` cap (`base/generic.css`, `width/max-width:
 * 120px`) matches the wrapper — and its `:not(textarea)` gives it specificity (0,2,1),
 * strictly higher than this rule's (0,2,0). Without `!important` the 120px `width`/
 * `max-width` win the cascade and the box collapses to a fixed `min-width` (never growing
 * to the cap). This is the exact same defeat `.index-table__wide-filter-control` performs
 * a few rules up. (These 3 sites are NOT under a `.filters` ancestor, so the
 * `.filters .dropdown-menu .form-control.input-sm` rescue at the top of this file does not
 * reach them.) `.ts-wrapper` covers the Tom Select site (class copied onto the wrapper);
 * the bare class covers the pre-init <select>. */
.status-filter__search-select,
.ts-wrapper.status-filter__search-select {
  width: 100% !important;
  min-width: min(32rem, 80vw) !important;
  max-width: min(90vw, 44rem) !important;
}
.sob-container {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  background: #fafafa;
  max-width: 500px;
}

.sob-container .form-control.input-sm {
  width: 100%;
  max-width: none;
}

.sob-table {
  margin-bottom: 8px;
}

.sob-header-row,
.sob-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.sob-header-row {
  padding-bottom: 2px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
}

.sob-handle-col {
  width: 24px;
  flex-shrink: 0;
  text-align: center;
}

.sob-label-col {
  flex: 1;
  min-width: 0;
}

.sob-value-col {
  flex: 1;
  min-width: 0;
}

.sob-action-col {
  width: 30px;
  flex-shrink: 0;
  text-align: center;
}

.sob-drag-handle {
  cursor: grab;
  color: #999;
}

.sob-drag-handle:hover {
  color: #555;
}

.sob-dragging {
  opacity: 0.5;
  background: #e8f0fe;
  border-radius: 3px;
}

.sob-placeholder {
  height: 34px;
  border: 2px dashed #4a90d9;
  border-radius: 3px;
  background: #e8f0fe;
}

.sob-add-btn {
  margin-top: 4px;
}

.sob-warning {
  padding: 6px 0;
}
:root {
  --profile-theme-color: rgba(255, 255, 255, 0);
  --showpage-header-gutter: 2rem;
}

@media screen and (max-width: 768px) {
  :root {
    --showpage-header-gutter: 1rem;
  }
}

.showpage__header {
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  padding: var(--showpage-header-gutter);
  position: relative;
}
@media screen and (max-width: 768px) {
  .showpage__header {
    padding: var(--showpage-header-gutter) 0 0 0;
  }
}

.showpage__header.showpage__header-has-logo--true > * {
  z-index: 2;
}

.showpage__header.showpage__header-has-logo--true .showpage__logo {
  z-index: 1;
}

.showpage__header.showpage__header--is-compact--true {
  padding: 1rem;
  margin: 0;
}

.showpage__header.showpage__header--is-compact--true .showpage__header-header {
  margin: 0;
  border: none;
  padding: 0;
}

.showpage__header.showpage__header--is-compact--true .showpage__header-btns {
  display: flex;
  justify-content: center;
  align-items: center;
}

.showpage__header.showpage__header--is-compact--true .showpage__header-title {
  margin-bottom: -0.5rem;
}

.showpage__header-has-logo--true {
  margin-top: 10rem;
}

@media (max-width: 767px) {
  .showpage__header-has-logo--true {
    margin-top: 12rem;
  }
}

.showpage__header-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #0000001f;
  margin-left: 1rem;
}

@media (max-width: 767px) {
  .showpage__header-header {
    margin-right: 1rem;
    gap: 1rem;
  }
}

.showpage__header-header--combine {
  position: relative;
}

.showpage__header-title-row {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
}

.showpage__header-name {
  padding-right: 1rem;
  margin: 0;
}

.showpage__header-nickname {
  font-weight: bold;
  font-size: 1.2em;
  color: #707070;
  padding-right: 1rem;
}

.showpage__logo {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem;
  opacity: 0.2;
  max-width: 30%;
  max-height: 80%;
}

@media (max-width: 600px) {
  .showpage__logo {
    left: unset;
    right: 0;
  }
}

.showpage__header-avatar-img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 100%;
  box-shadow: 0px 0px 4px 0px #3232322e;
  border: 1px solid rgba(0, 0, 0, 0.125);
  overflow: hidden;
}

.showpage__header-avatar-img > * {
  font-size: 6rem;
}

.showpage__header-avatar-img img {
  padding: 2.5rem;
  width: 100%;
}

/*
 * Async fade-in avatar (see library/showpage-avatar.js).
 * The server renders the circle as `--async` (opacity 0) only when it holds a
 * real <img>; the JS adds `--loaded` on the image's load event (opacity
 * transitions to 1 — the fade) or `--shown` on error (snap to opacity 1, no
 * transition). The initial-letter fallback never gets `--async`, so it renders
 * at full opacity with no animation.
 */
.showpage__header-avatar-img--async {
  opacity: 0;
}

.showpage__header-avatar-img--async.showpage__header-avatar-img--loaded {
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

.showpage__header-avatar-img--async.showpage__header-avatar-img--shown {
  opacity: 1;
}

@media print {
  .showpage__header-avatar-img {
    box-shadow: none;
    border: none;
  }
}

.showpage__header-avatar-container {
  position: absolute;
  left: 50%;
  margin-left: -6rem;
  width: 12rem;
  height: 12rem;
  top: -10rem;
}

.showpage__header-avatar {
  position: relative;
  width: 100%;
  height: 100%;
}

.showpage__header-member-type {
  position: absolute;
  bottom: 0.5rem;
  right: -0.1rem;
  font-size: 1em;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.5);
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.showpage__header-title {
  flex: 1;
  min-height: 3.4rem;
  padding-right: 1rem;
  min-width: 300px;
}

.showpage__header-title h1 {
  margin: 0;
  background-color: #ffffff8a;
}

.showpage__header-title aside {
  padding-left: 1rem;
}

.showpage__header-items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
}

.showpage__header-items dl {
  margin: 0;
  padding: 3rem 1rem 0;
  min-width: 160px;
}

.showpage__header-items dl .text-nowrap {
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  overflow: hidden;
}

@supports (display: grid) {
  .showpage__header-items {
    gap: 1rem;
    display: grid;
    grid-auto-flow: row;
    padding: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .showpage__header-items dl {
    padding: 0;
    min-width: unset;
  }

  .showpage__header-items dd {
    display: flex;
    flex-flow: row wrap;
    gap: 0.2em;
  }
}

.showpage__header-body--2-col {
  display: flex;
  flex-flow: row wrap;
}

@media (min-width: 767px) {
  .showpage__header-body--2-col > *:not(:first-child) {
    border-left: 1px solid #ddd;
  }
}

.showpage__header-body--col-1 {
  flex: 2;
}

.showpage__header-body--col-2 {
  flex: 1;
}

.showpage__header-section-header {
  padding: 1rem 1rem 0;
  font-size: 1.4em;
  color: #707070;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 767px) {
  .showpage__header-section-header {
    font-size: 1.2em;
  }
}

.showpage__mobile-nav {
  display: none;
}

.showpage__header-title-combine-label {
  position: absolute;
  top: -3rem;
  font-size: 1.5rem;
  z-index: 1;
}

@media (max-width: 767px) {
  .showpage__mobile-nav {
    background: white;
    box-shadow: 0px -4px 4px 0px #3232322e;
    display: flex;
    justify-content: center;
    z-index: 3;
  }

  .showpage__mobile-nav a {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    max-width: 140px;
    text-align: center;
    height: 7rem;
    padding: 0.5rem 1rem 1rem 1rem;
    text-decoration: none;
    justify-content: space-evenly;
  }

  .showpage__mobile-nav svg {
    margin-top: 0.5rem;
    display: block;
    width: 100%;
    height: 100%;
  }

  .showpage__mobile-nav a > .glyphicon {
    font-size: 2.5rem;
  }
}

@media print {
  .showpage__header--printable-card {
    max-width: 480px;
  }
}

.members__step-guide-container .members__actions-col {
  display: none;
}

.members__step-guide-container .search-reset {
  display: none !important;
}

.members__guide-groups-container {
  padding-bottom: 2rem;
}

.members__step-guide-footer {
  padding: 2rem 0;
  position: sticky;
  bottom: 0;
  background: var(--background-color);
  box-shadow: 0px -6px 6px -6px #3232326a;
  z-index: 3;
}

.members__step-guide-search-container {
  margin-bottom: 2rem;
}

.members__step-guide-search-input-group {
  max-width: 50rem;
}

.ltc-row--canceled {
  pointer-events: none;
  background-color: #e6e6e696;
  color: #676767;
}

.ltc-row--canceled > *:last-child:after {
  display: block;
  content: "Canceled";
  z-index: 1;
  color: #7d0000;
  font-size: 1.1em;
  font-weight: 800;
}

.ltc-row--closed > *:last-child:after {
  content: "Closed";
}

.payment-breakdown-table__container table {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.payment-breakdown-table__container tr > * {
  text-align: right;
}

.payment-breakdown-table__container tr > *:first-child {
  text-align: left;
}

.payment-breakdown-table__made-payment-table-fees td {
  border-top: 0;
  padding-top: 0;
}

.payment-breakdown-table__made-payment-table-fees small {
  display: block;
  margin-top: -5px;
  text-align: right;
}

.payment-breakdown-table__made-payment-table-payer {
  width: 270px;
  float: right;
  display: inline-block;
  text-align: right;
}

.payment-breakdown-table__amount-td {
  white-space: nowrap;
  min-width: 9.5em;
}

.payment-breakdown-table__made-payment-cost--is-dimmed-true {
  opacity: 0.6;
}

.cta-area-tutorial__wrapper {
  background-color: #dddddd;
}

.cta-area-tutorial__cta {
  flex: 1;
  text-align: center;
}

.form-layout__vertical .control-label {
  text-align: left;
}

.amp-feature__container {
  background: white;
  max-width: 900px;
}

.amp-feature__container--is-modal-false {
  padding: 1.5rem;
}

.association-page__container {
  font-size: 1.6rem;
}

/*
 * Site Page bodies (CU-86ajxbx9k). While Site Pages were on ActionText their body was wrapped in
 * `<section class="trix-content">`, and trix.css styled the admin-authored markup through that
 * wrapper. `content_html` has no wrapper, so these rules re-supply what the body actually relied
 * on — without them a full-width embed overflows the page, long URLs don't wrap, and headings fall
 * back to Bootstrap's oversized `h1`.
 *
 * Deliberately keyed on the Site Page show page, NOT bare `.association-page__container`:
 * `html_page_for` emits that class for the CMS homepage too (`static/login.html.erb`), which was
 * never inside `.trix-content` and must keep rendering exactly as it does today.
 */
.association-pages-show .association-page__container {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.association-pages-show .association-page__container img {
  max-width: 100%;
  height: auto;
}

.association-pages-show .association-page__container h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.association-pages-show .association-page__container li {
  margin-left: 1em;
}

/* The dead-embed stand-in the backfill leaves where an attachment's bytes are permanently gone. */
.association-pages-show .association-page__container .missing-attachment {
  color: #666;
  font-style: italic;
}

.group-show__affiliate-association-description {
  display: flex;
  position: relative;
  gap: 1rem;
  align-items: center;
  flex-flow: row wrap;
}

.group-show__affiliate-association-description h3 {
  margin: 0;
}

.group-show__affiliate-association-description img {
  order: -1;
  height: 5rem;
  width: auto;
  max-width: 30vw;
}

.email-footer-preview {
  background-color: #fff;
  padding: 1rem;
  font-size: 14px;
  border: 1px solid #ccc;
  font-family:
    "Lexend Deca",
    "Roboto",
    "Helvetica Neue",
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Helvetica,
    Arial,
    sans-serif,
    Apple Color Emoji,
    Segoe UI emoji;
  color: #333;
}

dl.event-show__subsection-info-details {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 1.5rem;
  margin-bottom: 0;
}

.event-show__subsection-info-actions {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 991px) {
  .event-show__subsection-info-actions {
    border-top: 1px solid #ddd;
    padding-top: 1rem;
    justify-content: flex-end;
    width: 100%;
  }
}
.table > thead > tr > td.muted,
.table > thead > tr > th.muted,
.table > thead > tr.muted > td,
.table > thead > tr.muted > th,
.table > tbody > tr > td.muted,
.table > tbody > tr > th.muted,
.table > tbody > tr.muted > td,
.table > tbody > tr.muted > th,
.table > tfoot > tr > td.muted,
.table > tfoot > tr > th.muted,
.table > tfoot > tr.muted > td,
.table > tfoot > tr.muted > th {
  background-color: var(--state-muted-bg);
}

.table-hover > tbody > tr > td.muted:hover,
.table-hover > tbody > tr > th.muted:hover,
.table-hover > tbody > tr.muted:hover > td,
.table-hover > tbody > tr:hover > .muted,
.table-hover > tbody > tr.muted:hover > th {
  background-color: color-mix(in srgb, var(--state-muted-bg), black 5%);
}

.table > thead > tr > td.caution,
.table > thead > tr > th.caution,
.table > thead > tr.caution > td,
.table > thead > tr.caution > th,
.table > tbody > tr > td.caution,
.table > tbody > tr > th.caution,
.table > tbody > tr.caution > td,
.table > tbody > tr.caution > th,
.table > tfoot > tr > td.caution,
.table > tfoot > tr > th.caution,
.table > tfoot > tr.caution > td,
.table > tfoot > tr.caution > th {
  background-color: var(--state-caution-bg);
}

.table-hover > tbody > tr > td.caution:hover,
.table-hover > tbody > tr > th.caution:hover,
.table-hover > tbody > tr.caution:hover > td,
.table-hover > tbody > tr:hover > .caution,
.table-hover > tbody > tr.caution:hover > th {
  background-color: color-mix(in srgb, var(--state-caution-bg), black 5%);
}

.table-responsive {
  overflow-x: visible;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: none;
}

.table-responsive::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

@media (max-width: 1200px) {
  .table-responsive {
    margin-right: -15px;
    margin-left: -15px;
    border-left: 0px;
    border-right: 0px;
    width: auto;
    overflow-x: auto;
  }
}

.table-responsive th:last-child .dropdown-menu,
.table-responsive td:last-child .dropdown-menu {
  left: auto;
  right: 0;
}

.table-responsive th:last-child .btn-group,
.table-responsive td:last-child .btn-group {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
}

.main-title__container + form.searchable {
  margin-top: 1.5rem;
}
/**
 * tom-select.css — single source of truth for Tom Select styling.
 *
 * This file is the behavior-preserving merge of the two files it replaces:
 *   - tom-select-2.4.3.css  (vendored `default` theme, Apache-2.0)
 *   - tom-select-bootstrap3.css  (Bootstrap 3 compatibility layer)
 * which previously loaded in that order via `*= require_directory ./components`
 * (alphabetical), the BS3 layer overriding the base theme on every conflict.
 *
 * The merge is MECHANICAL and produces the EXACT SAME computed styles as the
 * two files did at runtime: where a selector appeared in both, the BS3 value
 * (which won by source order) is the single value kept here. All BS3 variables
 * consumed below (--input-*, --btn-default-*, --gray*, --padding-*, --border-
 * radius-*, --brand-primary, --line-height-*, --font-size-small) are defined at
 * :root in config/variables.css, which loads before this file, so the base
 * theme's former concrete fallbacks never triggered — collapsing them onto the
 * var() values is exact, not approximate.
 *
 * Structure below: (1) the vendored base theme, then (2) the BS3 override layer,
 * same order as before. Selectors that appeared in BOTH are resolved once, in
 * place, in section 1; the now-redundant duplicate is dropped from section 2.
 *
 * DEFERRED — curation: the requester wants some current settings adjusted, but
 * the specific values are TBD pending requester input. That work is split into a
 * linked follow-up task and is intentionally NOT done here, so this change stays
 * a zero-visual-regression collapse. See the follow-up task linked on CU-86ajqhunw.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * Base theme license (tom-select.css v2.4.3):
 * Copyright (c) contributors. Licensed under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with the
 * License. You may obtain a copy at http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 */

/* ═══════════════════════════ 1. Base theme ═══════════════════════════ */

.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
/* Folded: base's later `.ts-wrapper.multi.has-items .ts-control { padding-left: 5px }`
 * override is resolved into the padding shorthand's left value here. */
.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 1px) 8px calc(8px - 2px - 3px - 1px) 5px;
  --ts-pr-min: $padding-x;
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control,
.disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #1da7ee;
  color: #fff;
  border: 1px solid #0073bb;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #92c836;
  color: #fff;
  border: 1px solid #00578d;
}
.ts-wrapper.multi.disabled .ts-control > div,
.ts-wrapper.multi.disabled .ts-control > div.active {
  color: white;
  background: #d2d2d2;
  border: 1px solid #aaaaaa;
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0 4px !important;
}
/* Folded: base's later `.ts-control.rtl { padding-left: max(...) !important }`
 * (RTL mirror of the .ts-control:not(.rtl) padding-right rule) resolved in. */
.ts-control.rtl {
  text-align: right;
  padding-left: max(
    var(--ts-pr-min),
    var(--ts-pr-clear-button) + var(--ts-pr-caret)
  ) !important;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
/* `.ts-dropdown .optgroup-header` — resolved base (×2) + BS3: BS3 won on
 * background, color, font-size (base's 0.85em), font-weight, padding (base's
 * padding-top:7px was re-set by BS3's padding shorthand) and added text-
 * transform / letter-spacing; base's `cursor: default` had no override. */
.ts-dropdown .optgroup-header {
  cursor: default;
  background: var(--gray-lighter);
  color: var(--gray-darker);
  font-size: var(--font-size-small, 12px);
  font-weight: bold;
  padding: var(--padding-small-vertical) var(--padding-base-horizontal);
  text-transform: none;
  letter-spacing: normal;
}
/* `.ts-dropdown .active` — resolved base + BS3: BS3 won on both properties. */
.ts-dropdown .active {
  background-color: var(--gray-lighter);
  color: var(--gray-darker);
}
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}

.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}

.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}

.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}

/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.plugin-clear_button.form-select .clear-button,
.plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.single.has-items:not(.disabled):not(.locked)
  .clear-button {
  display: block;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder,
.plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus
  .ts-control
  > input::-ms-input-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus
  .ts-control
  > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #0073bb;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #00578d;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: #aaaaaa;
}

.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #0073bb;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #00578d;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: #aaaaaa;
}

:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: 0.75rem;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control:not(.rtl) {
  padding-right: max(
    var(--ts-pr-min),
    var(--ts-pr-clear-button) + var(--ts-pr-caret)
  ) !important;
}

/* Folded: base declared `.ts-wrapper` twice (position, then display + min-
 * height); combined into one rule with no cascade change. */
.ts-wrapper {
  position: relative;
  display: flex;
  min-height: 36px;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.ts-wrapper.single .ts-control {
  --ts-pr-caret: 2rem;
}
.ts-wrapper.single .ts-control::after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #808080 transparent transparent transparent;
}
.ts-wrapper.single .ts-control:not(.rtl)::after {
  right: 15px;
}
.ts-wrapper.single .ts-control.rtl::after {
  left: 15px;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  margin-top: -4px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #808080 transparent;
}
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single.input-active .ts-control input {
  cursor: text;
}

.ts-wrapper.multi .ts-control [data-value] {
  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
  border-radius: 3px;
  background-color: color-mix(#1da7ee, #178ee9, 60%);
  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
  background-repeat: repeat-x;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.03);
}
.ts-wrapper.multi .ts-control [data-value].active {
  background-color: color-mix(#008fd8, #0075cf, 60%);
  background-image: linear-gradient(to bottom, #008fd8, #0075cf);
  background-repeat: repeat-x;
}
.ts-wrapper.multi.disabled .ts-control [data-value] {
  color: #999;
  text-shadow: none;
  background: none;
  box-shadow: none;
}
.ts-wrapper.multi.disabled .ts-control [data-value],
.ts-wrapper.multi.disabled .ts-control [data-value] .remove {
  border-color: #e6e6e6;
}
.ts-wrapper.multi.disabled .ts-control [data-value] .remove {
  background: none;
}
.ts-wrapper.single .ts-control {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  background-color: color-mix(#fefefe, #f2f2f2, 60%);
  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
  background-repeat: repeat-x;
}

.ts-wrapper.single .ts-control,
.ts-dropdown.single {
  border-color: #b8b8b8;
}

.dropdown-active .ts-control {
  border-radius: 3px 3px 0 0;
}

.ts-dropdown .optgroup {
  border-top: 1px solid #f0f0f0;
}
.ts-dropdown .optgroup:first-child {
  border-top: 0 none;
}

/* `.ts-dropdown` — resolved base + BS3, placed at the END of the base section
 * (the exact cascade slot the BS3 override held originally: after ALL base
 * theme rules). This ordering is load-bearing: the base grouped rule
 * `.ts-dropdown, .ts-control, .ts-control input { color: #303030 }` above has
 * equal specificity, so the resolved `color: var(--input-color)` must come
 * after it to win — as it did across the two-file boundary. BS3 won on border,
 * border-radius, background, box-shadow, and added color; base's
 * margin (0.25rem 0 0) with BS3's later margin-top:2px collapses to `2px 0 0`;
 * base's `border-top: 0 none` was fully re-set by BS3's border shorthand. */
.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  box-sizing: border-box;
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius-base);
  background: var(--input-bg);
  margin: 2px 0 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  color: var(--input-color);
}

/* ═══════════════════ 2. Bootstrap 3 compatibility layer ═══════════════════
 *
 * Overrides Tom Select's defaults to match Bootstrap 3's `.form-control`,
 * `.btn-default`, and `.dropdown-menu` styling so migrated `.ff-select`
 * dropdowns are visually indistinguishable from other Bootstrap 3 inputs.
 * Mirrors the pattern of the (since-deleted) select2-bootstrap3 adapter.
 */

/* ----- Wrapper sizing: match .form-control exactly ----- */

.ts-wrapper.form-control,
.ts-wrapper.form-control .ts-control {
  padding: 0;
  background: var(--input-bg);
  border-color: var(--input-border);
  border-radius: var(--border-radius-base);
}

/* Upstream sets `.ts-wrapper { min-height: 36px }` which pushes the wrapper 2px
 * taller than BS3's 34px .form-control. Reset to match. BS3's `.form-control`
 * also fixes `height: 34px` — override to `auto` so a multi-select with enough
 * chips to wrap grows to fit instead of clipping the second row. */
.ts-wrapper.form-control {
  height: auto;
  min-height: 34px;
}
.ts-wrapper.input-sm {
  min-height: 30px;
}

/* Folded in the later `.ts-wrapper.form-control .ts-control { align-items: center }`
 * declaration (no conflict with the properties below). */
.ts-wrapper.form-control .ts-control {
  /* match .form-control padding so single-select looks identical to <input.form-control> */
  padding: var(--padding-base-vertical) var(--padding-base-horizontal);
  border: 0;
  background: transparent;
  /* Inner content fills the wrapper; keep it vertically centered. */
  line-height: var(--line-height-base);
  align-items: center;
}

/* Single-select: match .form-control's 34px exactly. */
.ts-wrapper.single.form-control .ts-control {
  display: flex;
  align-items: center;
}

/* Multi-select with items: the upstream default uses asymmetric padding via
 * calc(8px-2px-1px) etc., which clips chips at the bottom in a 34px input.
 * `min-height: 32px` makes the control fill the wrapper's content box
 * (34px − 2px border) so the control's own `align-items: center` vertically
 * centers the chips instead of top-aligning them. */
.ts-wrapper.multi.has-items.form-control .ts-control {
  padding: 1px var(--padding-base-horizontal) 1px 4px;
  min-height: 32px;
}

/* Upstream makes the search <input> a flex item with `flex: 1 1 auto`, which
 * stretches it to the tallest sibling on the row (the chip). Pin the input to
 * its natural line height so it doesn't run away when there are no chips. */
.ts-wrapper.form-control .ts-control > input {
  height: 22px;
  line-height: 22px;
}

/* Input-sm size variant. */
.ts-wrapper.input-sm,
.ts-wrapper.input-sm .ts-control {
  font-size: var(--font-size-small, 12px);
  border-radius: var(--border-radius-small, 3px);
}
.ts-wrapper.input-sm .ts-control {
  padding: var(--padding-small-vertical) var(--padding-small-horizontal);
  min-height: 28px;
  line-height: var(--line-height-small);
}
.ts-wrapper.multi.has-items.input-sm .ts-control {
  padding: 2px var(--padding-small-horizontal) 2px 3px;
}

/* ----- Focus state: match BS3's .form-control:focus blue glow ----- */

.ts-wrapper.form-control.focus,
.ts-wrapper.form-control.focus .ts-control {
  border-color: var(--input-border-focus);
  outline: 0;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}

/* ----- Placeholder color ----- */

.ts-wrapper .ts-control > input::placeholder,
.ts-wrapper .ts-control > input::-webkit-input-placeholder {
  color: var(--input-color-placeholder);
}

/* ----- Chips (multi-select pills): BS3 .btn-default-like -----
 * Folded in the earlier `height: 22px; display: inline-flex; align-items:
 * center` sizing declaration (no conflict with the appearance rules below). */

.ts-wrapper.multi .ts-control > .item {
  height: 22px;
  display: inline-flex;
  align-items: center;
  background: var(--btn-default-bg);
  color: var(--btn-default-color);
  border: 1px solid var(--btn-default-border);
  border-radius: var(--border-radius-small, 3px);
  padding: 1px 6px;
  margin: 1px 4px 1px 0;
  font-size: var(--font-size-small, 12px);
  line-height: var(--line-height-small, 1.5);
  /* Drop the upstream bright-blue gradient look. */
  background-image: none;
  text-shadow: none;
  box-shadow: none;
}

.ts-wrapper.multi .ts-control > .item.active {
  background: var(--gray-lighter);
  color: var(--btn-default-color);
  border-color: var(--gray);
}

.ts-wrapper.multi.disabled .ts-control > .item {
  background: var(--gray-lighter);
  color: var(--gray);
  border-color: var(--input-border);
}

/* Remove (×) button inside a chip — quiet by default, clearly interactive on
 * hover/focus. Dropped the upstream left-border divider; use a pill-shaped
 * hover background with BS3 .text-danger color as the affordance instead. */
.ts-wrapper.multi .ts-control > .item .remove {
  min-height: 1.2em;
  border-left: 0;
  margin-left: 4px;
  padding: 0 5px;
  color: var(--gray);
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
  border-radius: var(--border-radius-small, 3px);
  background: transparent;
  transition:
    background-color 0.1s ease-in-out,
    color 0.1s ease-in-out;
}

.ts-wrapper.multi .ts-control > .item .remove:hover,
.ts-wrapper.multi .ts-control > .item .remove:focus {
  color: #fff;
  background: var(--gray);
  outline: 0;
}

/* Focus ring on the remove button for keyboard users (ff_aria_remove_buttons
 * makes these tab-focusable; without an outline they're invisible when focused). */
.ts-wrapper.multi .ts-control > .item .remove:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: 1px;
}

/* ----- Dropdown panel -----
 * The `.ts-dropdown`, `.ts-dropdown .active`, and `.ts-dropdown .optgroup-header`
 * BS3 overrides were resolved into their base-theme rules in section 1 above,
 * so they are not repeated here. */

.ts-dropdown .option,
.ts-dropdown .create,
.ts-dropdown .no-results {
  padding: var(--padding-small-vertical) var(--padding-base-horizontal);
  line-height: var(--line-height-base);
  color: var(--gray-darker);
}

/* Actionable empty state — the `no_results` template a `.ff-select` opts into via
 * `data-select2-options.noResults` (see the ff_no_results_action plugin in
 * library/finalforms_select.js). The whole row is the click target, so it has to read as one:
 * pointer cursor on the row, link styling on the call to action. */
.ts-dropdown .ff-select__no-results {
  cursor: pointer;
}

.ts-dropdown .ff-select__no-results-action {
  color: var(--link-color);
  text-decoration: underline;
}

.ts-dropdown .ff-select__no-results:hover {
  background-color: var(--gray-lighter);
}

/* Currently-selected option in the dropdown (single-select, or multi when item
 * kept in list) — BS3-primary accent. */
.ts-dropdown [aria-selected="true"] {
  background-color: var(--brand-primary);
  color: #fff;
}

.ts-dropdown [aria-selected="true"].active {
  background-color: var(--brand-primary);
  color: #fff;
}

.ts-dropdown .highlight {
  background: rgba(255, 240, 145, 0.7);
  color: inherit;
}

/* ----- Validation-error / state-info propagation (matches the v3 wrapper) ----- */

.ts-wrapper.validation-error,
.ts-wrapper.validation-error .ts-control {
  border-color: #a94442;
}
.ts-wrapper.validation-error.focus,
.ts-wrapper.validation-error.focus .ts-control {
  border-color: #843534;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 6px #ce8483;
}

.ts-wrapper.state-info,
.ts-wrapper.state-info .ts-control {
  border-color: #31708f;
}

/* ----- Body-parented dropdowns (`ff_body_dropdown`, finalforms_select.js) ----- */

/* Option lists the wrapper re-parents to <body> to escape the filters menu's
 * `overflow: auto` clip. In <body> they leave the menu's stacking context, so
 * `.ts-dropdown`'s own `z-index: 10` would paint them UNDER the Bootstrap
 * `.dropdown-menu` (z-index 1000) and under the sticky opaque
 * `.status-filter-li__submit-btn` bar. 1060 clears both, and also clears a BS3 modal
 * (1050) / backdrop (1040) so the planned status-filter-in-a-modal migration inherits
 * a working dropdown. `top` / `left` / `width` are set inline by Tom Select's
 * `positionDropdown()`, which overrides `.ts-dropdown`'s `top: 100%; left: 0;
 * width: 100%`. */
.ts-dropdown--body-parented {
  z-index: 1060;
}
.navbar-static-top {
  position: sticky;
  top: 0;
  z-index: 4;
}

@media (max-width: 767px) {
  .navbar-static-top .navbar-brand.logo {
    display: block;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-static-top .navbar-brand.logo img {
    max-width: 100%;
  }

  .navbar-static-top .navbar__title {
    float: none !important;
    margin: 0 0 0.5em 0;
    text-align: center;
  }
}

.top-navbar-open #body-wrapper > *:not(.navbar-static-top) {
  pointer-events: none;
}

@media (max-width: 767px) {
  .navbar-right {
    position: absolute;
    top: 50px;
    width: 100%;
    background: #f5f5f5;
    border-bottom: 1px solid #d4d4d4;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
    margin-top: 0;
    z-index: 4;
    pointer-events: none;
    display: none;
    overflow: auto;
    max-height: calc(100vh - 100px);
  }

  .top-navbar-open .navbar-right {
    pointer-events: auto;
    display: block;
  }
}

@media (min-width: 767px) {
  .navbar-right .dropdown-menu {
    overflow: auto;
    max-height: calc(100vh - 50px);
  }
}

.top-navbar__mobile-toggle {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  padding: 6px;
  color: var(--theme-navbar-mobile-toggle-color);
  --btn-color: var(--theme-navbar-mobile-toggle-color);
}

@media (min-width: 767px) {
  .top-navbar__mobile-toggle {
    display: none;
  }
}

.top-navbar__mobile-toggle-svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.top-navbar__mobile-toggle-svg path {
  stroke-width: 32;
}

body.top-navbar-open .top-navbar__mobile-toggle-svg-open {
  display: none;
}

body:not(.top-navbar-open) .top-navbar__mobile-toggle-svg-closed {
  display: none;
}

@media (max-width: 991px) {
  .navbar__title {
    display: none;
  }
}

.body__authenticated--true .navbar__title {
  display: none;
}

.navbar {
  color: #777777;
  background-color: #f5f5f5;
  border-bottom-color: #d4d4d4;
  border-width: 0px 0px 1px 0px;
  transition: background-color 0.4s ease-out;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
}

.navbar .navbar__title {
  margin-top: 0.9em;
}

.navbar .nav a:hover,
.navbar .nav button:hover {
  color: var(--text-color);
}
.nav > li > button:focus,
.nav > li > button:hover {
  text-decoration: none;
  background-color: #eee;
}

.navbar .navbar-brand.logo {
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
}

.navbar .navbar-brand.logo > img {
  max-height: 40px;
  max-width: 400px;
  padding: 0;
  vertical-align: baseline;
}

.navbar-nav > li.divider {
  width: 1px;
  padding: 0;
  margin: 15px 10px;
  height: 1.4em;
  background: #ddd;
}

.navbar-nav > li > .dropdown-toggle {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
  position: relative;
  display: block;
}
@media (min-width: 768px) {
  .navbar-nav > li > .dropdown-toggle {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.navbar-nav > .identifier > .dropdown-toggle {
  display: flex;
  text-align: left;
  gap: 0.3em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  align-items: center;
  height: 50px;
  width: 100%;
}

.navbar-nav > li > a,
.navbar-nav > li > .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
  min-width: 3em;
  --btn-color: var(--theme-primary-color);
  font-weight: normal;
  border: none;
  text-shadow: none;
  background-image: none !important;
  background: transparent;
  box-shadow: none;
  width: 100%;
  display: block;
  text-align: left;
}

@media (max-width: 1200px) {
  .navbar-nav > li > a,
  .navbar-nav > li > .dropdown-toggle {
    padding-left: 9px;
    padding-right: 9px;
  }
}

@media (max-width: 768px) {
  .navbar-nav > li > a,
  .navbar-nav > li > .dropdown-toggle {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.members-transcript.is-official-true .primary-actions {
  padding: 1.5rem;
}

.members-transcript.is-official-true {
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.members-transcript.is-official-true .main-title {
  display: none;
}

.members-transcript.is-official-true .panel-default {
  border: none !important;
}

/* Non-NIAAA orgs fall back to their square (1:1) logo; cap its height so it renders as a compact
   header mark rather than a full-width block (img-responsive alone would let the square balloon).
   Scoped to the --square modifier so NIAAA's wide banner keeps its historical full-width rendering. */
.transcript__logo--square {
  max-height: 96px;
  width: auto;
}

/* Masthead for non-NIAAA transcripts: the square mark and the association name read as one
   letterhead lockup, closed by a rule that separates it from the transcript body. NIAAA is not
   involved — its wide banner already carries the association name and keeps its own wrapper. */
.transcript__masthead {
  display: flex;
  align-items: center;
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 2px solid #dededf;
  page-break-inside: avoid;
  break-inside: avoid;
}

.transcript__masthead .transcript__logo--square {
  flex: 0 0 auto;
  max-height: 88px;
}

/* The divider is this element's own border, not a spacer div; align-self stretch runs it the full
   height of the lockup while the inner flex keeps the name optically centered against the mark. */
.transcript__masthead-name {
  display: flex;
  align-items: center;
  align-self: stretch;
  max-width: 44ch;
  margin-left: 2rem;
  padding-left: 2rem;
  border-left: 1px solid #dededf;
  color: #1c1c1f;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .transcript__masthead .transcript__logo--square {
    max-height: 64px;
  }

  .transcript__masthead-name {
    margin-left: 1.2rem;
    padding-left: 1.2rem;
    font-size: 1.5rem;
  }
}

/* Print drops body copy to 8pt; hold the masthead to a proportional size so the letterhead doesn't
   eat the top of the page. */
@media print {
  .transcript__masthead .transcript__logo--square {
    max-height: 64px;
  }

  .transcript__masthead-name {
    font-size: 12pt;
  }
}

.transcript__official-logo {
  width: 6vw;
}

.transcript__official-header {
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.transcript__official-header > * {
  margin: 0;
}

.transcript__official-header h4 {
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}

.transcript__official-information {
  column-count: 2;
  gap: 4vw;
}

.transcript__official-information dt {
  width: auto;
  padding-right: 1rem;
}

.transcript__official-information dd {
  margin-left: 0;
}

.transcript__official-table > div > * {
  border-top: 2px solid black !important;
}

.transcript__official-table table {
  border: none !important;
}

.transcript__official-table th {
  border: none !important;
}

.transcript__official-table td {
  border: none !important;
}

.transcript__official-table tbody {
  border: none !important;
}

.transcript__official-table th:nth-child(1),
.transcript__official-table td:nth-child(1) {
  width: 60px;
}

.transcript__official-table th:nth-child(4),
.transcript__official-table td:nth-child(4) {
  width: 70px;
  text-align: center;
}

.transcript__official-table th:nth-child(5),
.transcript__official-table td:nth-child(5) {
  width: 110px;
  text-align: center;
}

.transcript__official-table th:nth-child(6),
.transcript__official-table td:nth-child(6) {
  width: 110px;
  text-align: center;
}

.transcript__official-signature-fields {
  padding-top: 3rem;
}

.transcript__official-signature-field {
  position: relative;
}

.transcript__official-signature-field label {
  display: block;
}

.transcript__official-signature-field input {
  border: none;
  border-bottom: 2px solid black;
  text-align: center;
}

.transcript__official-signature-field img {
  position: absolute;
  top: -23px;
  right: 24px;
  height: 54px;
  cursor: pointer;
}

.transcript__official-disclaimers {
  font-size: 12.5px;
  padding: 2rem 0 0;
}

.transcript__official-disclaimers > * {
  max-width: 52vw;
}

.transcript__official-accreditors-logo {
  height: 60px;
}

.transcript__certifier-section-wrapper {
  break-inside: avoid;
}
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: black;
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-dialogs {
  position: relative;
}

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #f00 0px 0px 1.5px 1px;
}

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection {
  background: none;
}

trix-editor
  .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight;
}

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}

trix-editor .trix-button-group {
  display: inline-flex;
}

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}

trix-editor .attachment__metadata-container {
  position: relative;
}

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir="rtl"] blockquote,
.trix-content blockquote[dir="rtl"] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir="rtl"] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content
  .attachment__caption
  .attachment__name
  + .attachment__size::before {
  content: " \2022 ";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
.trix-content a {
  text-decoration: revert;
}
/* Vendor sponsorship tier status panel — see VendorPresenter#render_tier_status_panel.
   Note: rem is 10px here (html { font-size: 10px }), so 2rem = 20px. */

.tier-status .tier-status__standing {
  margin-bottom: 0.6rem;
}

.tier-status .tier-status__caption {
  font-weight: 600;
}

/* Make the current-tier badge read as the headline of the panel. */
.tier-status .tier-status__standing .label {
  font-size: 1.3rem;
  vertical-align: baseline;
}

.tier-status .tier-status__spend,
.tier-status .tier-status__cart-line {
  margin-bottom: 0.4rem;
}

.tier-status .tier-status__next {
  margin-top: 0.6rem;
  margin-bottom: 0;
}

/* Primary "how far to the next tier" line — the actionable metric. */
.tier-status .tier-status__goal {
  font-size: 1.6rem;
  font-weight: 600;
}

.tier-status .tier-status__unlock {
  display: inline-block;
  margin-top: 0.4rem;
  font-style: italic;
}

/* Custom two-segment progress bar: paid (solid) + in-cart projection (striped).
   Not Bootstrap — see VendorPresenter#tier_status_bar. The .tier-status__chart
   inner region is the shared coordinate space for the rail fills (width: X%) and
   the threshold ticks (left: P%); its side margins give the end-tick labels room
   to sit in from the panel edge, and its top/bottom margins reserve space for
   the always-on tick labels above and below the rail. */
.tier-status .tier-status__progress {
  padding: 1.2rem 0; /* breathing room between the bar block and the text/table around it */
  margin-bottom: 1.2rem;
}

.tier-status .tier-status__chart {
  position: relative; /* containing block for the overlaid ticks */
  margin: 3.4rem 2rem 2.4rem; /* top = two-row name room; bottom = amount room; sides = label overflow room (the rail's cap padding adds the rest) */
}

/* The grey rail. Spans the full chart width and extends past the thresholds:
   its 1.6rem horizontal padding is the lead-in/lead-out cap, so the fills
   (laid out in the padded content box) leave grey showing at both rounded ends.
   The ticks' inset (.tier-status__ticks) matches this padding exactly so the
   fill scale and the threshold scale line up. */
.tier-status .tier-status__track {
  display: flex;
  height: 1.6rem;
  padding: 0 1.6rem;
  border-radius: 0.8rem;
  background-color: #eee;
  overflow: hidden;
}

.tier-status .tier-status__fill {
  position: relative; /* anchor for the --lead cap extension */
  flex: 0 0 auto; /* honor the inline width: X% (of the padded content box); never shrink */
  height: 100%;
  transition: width 0.4s ease;
}

/* Bleed the leftmost fill into the lead-in cap (the track's 1.6rem left padding)
   so the green runs from the rounded start. Clipped to the rounded corner by the
   track's overflow:hidden; inherits the fill color. */
.tier-status .tier-status__fill--lead::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 1.6rem;
  background-color: inherit;
}

.tier-status .tier-status__fill--paid {
  background-color: #5cb85c;
}

/* The cart segment reads as "projected, not yet yours": lighter + striped. */
.tier-status .tier-status__fill--cart {
  background-color: #9fd89f;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.35) 0.8rem,
    transparent 0.8rem,
    transparent 1.6rem
  );
}

/* Inset overlay for the threshold ticks — left/right match the track's 1.6rem
   cap padding so tick left:P% shares the fills' coordinate space, and it sits
   outside the clipped track so the tick labels aren't cut off. */
.tier-status .tier-status__ticks {
  position: absolute;
  top: 0;
  left: 1.6rem;
  right: 1.6rem;
  height: 1.6rem; /* same as the rail */
}

/* Tier-threshold tick marks overlaid on the rail (see #tier_status_bar_notches).
   A thin line through the rail, with its tier name above and dollar amount below. */
.tier-status .tier-status__tick {
  position: absolute;
  top: 0;
  height: 1.6rem; /* same as the rail */
  width: 0;
  border-left: 0.2rem solid rgba(0, 0, 0, 0.45);
  transform: translateX(-0.1rem); /* center the line on its threshold */
  z-index: 2;
}

.tier-status .tier-status__tick-name,
.tier-status .tier-status__tick-amount {
  position: absolute;
  left: 0;
  transform: translateX(-50%); /* center the label on the tick */
  white-space: nowrap;
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
}

/* In-between (non-important) ticks: a lighter mark with no inline label — the
   name + amount live in a hover popover on the dot below, so clustered low tiers
   stay readable. */
.tier-status .tier-status__tick--muted {
  border-left-color: rgba(0, 0, 0, 0.25);
}

/* Hover handle that carries the popover for a muted tick. A small dot just above
   the rail gives an actual hover/focus target (the 0.2rem tick line is too thin
   to hit). */
.tier-status .tier-status__tick-dot {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.2rem); /* sit just above the rail */
  transform: translateX(-50%); /* center the dot on the tick */
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.tier-status .tier-status__tick-dot:hover,
.tier-status .tier-status__tick-dot:focus {
  background-color: rgba(0, 0, 0, 0.55);
  outline: none;
}

.tier-status .tier-status__tick-name {
  bottom: calc(100% + 0.4rem); /* above the rail */
  font-weight: 600;
}

/* Odd ticks lift their name to a second row so neighboring names don't collide
   where low tiers bunch on the linear scale. */
.tier-status .tier-status__tick-name--raised {
  bottom: calc(100% + 1.8rem);
}

.tier-status .tier-status__tick-amount {
  top: calc(100% + 0.4rem); /* below the rail */
  color: #777;
}

.tier-status .tier-status__line-items {
  margin-bottom: 0;
}

.tier-status .tier-status__line-items table {
  margin-bottom: 0;
}

.tier-status .tier-status__line-item--cart {
  color: var(--state-muted-text, #777);
  font-style: italic;
}

/* Collapsed "All sponsorship tiers" reference. */
.tier-status .tier-status__tiers {
  margin-top: 1.2rem;
}

.tier-status .tier-status__tiers > summary {
  cursor: pointer;
  font-weight: 600;
}

.tier-status .tier-status__tiers table {
  margin-top: 0.6rem;
  margin-bottom: 0;
}

.tier-status .tier-status__tier-row--active {
  font-weight: 600;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *





 */