/* Public website: the few form / tab / accordion styles that used to come from the MUI and jQuery UI
   libraries. Same class names as before, so the pages and web.css keep working unchanged.
   Loaded BEFORE web.css (web.css holds the site's own adjustments to these). */

/* ---- text fields with a floating label ---- */
.mui-textfield { display: block; padding-top: 15px; margin-bottom: 20px; position: relative; }
.mui-textfield > input,
.mui-textfield > textarea {
  box-sizing: border-box; display: block; width: 100%; height: 32px; padding: 0; margin: 0;
  background-color: transparent; color: rgba(0, 0, 0, .87);
  border: none; border-bottom: 1px solid rgba(0, 0, 0, .26); border-radius: 0; outline: none; box-shadow: none;
  font-family: inherit; font-size: 16px; line-height: inherit;
}
.mui-textfield > textarea { min-height: 64px; height: auto; padding: 5px 0; }
.mui-textfield > input:focus,
.mui-textfield > textarea:focus { border-color: #ff7a18; border-width: 2px; height: 33px; margin-bottom: -1px; }
.mui-textfield > label {
  position: absolute; top: 0; left: 0; display: block; width: 100%;
  color: rgba(0, 0, 0, .54); font-size: 12px; font-weight: 400; line-height: 15px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
}
.mui-textfield > input:focus ~ label,
.mui-textfield > textarea:focus ~ label { color: #ff7a18; }

/* label sits inside the empty field and moves up when the field has focus or a value */
.mui-textfield--float-label > label {
  transform: translate(0, 15px); font-size: 16px; line-height: 32px; color: rgba(0, 0, 0, .26);
  transition: transform .15s ease-out, font-size .15s ease-out, line-height .15s ease-out;
}
.mui-textfield--float-label > input:focus ~ label,
.mui-textfield--float-label > textarea:focus ~ label,
.mui-textfield--float-label > input.mui--is-not-empty ~ label,
.mui-textfield--float-label > textarea.mui--is-not-empty ~ label,
.mui-textfield--float-label > input:-webkit-autofill ~ label {
  transform: none; font-size: 12px; line-height: 15px; color: rgba(0, 0, 0, .54);
}
.mui-textfield--float-label > input:focus ~ label { color: #ff7a18; }
@media (prefers-reduced-motion: reduce) { .mui-textfield--float-label > label { transition: none; } }

/* ---- select ---- */
.mui-select { display: block; padding-top: 15px; margin-bottom: 20px; position: relative; }
.mui-select > select {
  box-sizing: border-box; display: block; width: 100%; height: 32px; padding: 0 25px 0 0; margin: 0;
  -webkit-appearance: none; appearance: none;
  background-color: transparent; color: rgba(0, 0, 0, .87);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23000' fill-opacity='.54'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
  border: none; border-bottom: 1px solid rgba(0, 0, 0, .26); border-radius: 0; outline: none; box-shadow: none;
  font-family: inherit; font-size: 16px; cursor: pointer;
}
.mui-select > select:focus { border-color: #ff7a18; border-width: 2px; height: 33px; margin-bottom: -1px; }

/* ---- tabs (Sign In / Sign Up) ---- */
.mui-tabs__bar { list-style: none; padding: 0; margin: 0; background-color: transparent; white-space: nowrap; overflow-x: auto; }
.mui-tabs__bar > li { display: inline-block; }
.mui-tabs__bar > li > a {
  display: block; height: 48px; line-height: 48px; padding: 0 24px; text-align: center; white-space: nowrap;
  text-transform: uppercase; text-decoration: none; font-weight: 500; font-size: 14px; color: rgba(0, 0, 0, .54);
  cursor: pointer; user-select: none;
}
.mui-tabs__bar > li > a:hover { text-decoration: none; }
.mui-tabs__bar > li > a:focus-visible { outline: 2px solid #ff7a18; outline-offset: -2px; }
.mui-tabs__bar.mui-tabs__bar--justified { display: table; width: 100%; table-layout: fixed; }
.mui-tabs__pane { display: none; }
.mui-tabs__pane.mui--is-active { display: block; }

/* ---- accordion (FAQ) ---- */
.q-accordion > h3 {
  display: block; position: relative; margin: 2px 0 0; padding: 1em; cursor: pointer;
  border: 1px solid #c5c5c5; border-radius: 3px; background: #f6f6f6;
  font-size: 15px; font-weight: bold; color: #ed3237;
}
.q-accordion > h3.is-open { border-color: #ed3237; background: #ed3237; color: #fff; font-weight: 600; border-radius: 3px 3px 0 0; }
.q-accordion > h3:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.q-accordion > .q-accordion-body { padding: 1em 2.2em; border: 1px solid #ddd; border-top: 0; border-radius: 0 0 3px 3px; background: #fff; color: #333; overflow: auto; }

/* answers written in the admin panel's editor: lists keep their bullets and numbers
   (the site's reset removes them everywhere else), paragraphs keep a little space */
.q-accordion-body ul, .q-accordion-body ol { margin: .5em 0 .75em; padding-left: 1.6em; }
.q-accordion-body ul { list-style: disc outside; }
.q-accordion-body ol { list-style: decimal outside; }
.q-accordion-body li { display: list-item; margin: .15em 0; }
.q-accordion-body p { margin: 0 0 .6em; }
.q-accordion-body a { color: #ed3237; text-decoration: underline; }