/* Shared by the three portals (app, participant, admin). Loaded before each portal stylesheet. */
:root {
  /* Corporate palette — always reference colors through these custom properties. */
  --color-primary: #0064a6;
  --color-primary-rgb: 0, 100, 166;
  --color-secondary: #009b90;
  --color-secondary-dark: #008278;
  --color-warning: #de6328;
  --color-danger: #ad1644;
  --color-purple: #741669;
}
/* AdminLTE sets the alert backgrounds with !important, so overriding them needs it too. */
.alert-success {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}
.alert-warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}
.alert-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}
.background-primary {
  background-color: var(--color-primary) !important;
  color: white !important;
}
.background-secondary {
  background-color: var(--color-secondary) !important;
  color: white !important;
}
/* Striped background as an environment cue. Admin/evaluator use AdminLTE's
   `.content-wrapper`; the participant/app area (skin-green, e.g.
   `_participant.stepper.index`) has no content-wrapper, so stripe its body. */
body.app-dev .content-wrapper,
body.skin-green.app-dev {
  background: url("../images/admin/stripe/1-fp3WFdo.png") repeat;
}
body.app-pre .content-wrapper,
body.skin-green.app-pre {
  background: url("../images/admin/stripe/2-NhN2YXu.png") repeat;
}
body.app-test .content-wrapper,
body.skin-green.app-test {
  background: url("../images/admin/stripe/3-NXs4e1M.png") repeat;
}
.login-page {
  background: url("../images/admin/background/login-kDR3Tgz.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
}
.app-character-remaining {
  margin-bottom: 20px;
}
.app-character-remaining .form-group {
  margin-bottom: 0;
}
.app-character-remaining .app-character-remaining-text {
  margin-top: 5px;
  color: #6c757d;
}
.full-width {
  width: 100%;
}
.padding-top-0 {
  padding-top: 0;
}
.margin-top-5 {
  margin-top: 5px;
}
.margin-top-15 {
  margin-top: 15px;
}
.margin-top-20 {
  margin-top: 20px;
}
.margin-top-25 {
  margin-top: 25px;
}
.margin-top-30 {
  margin-top: 30px;
}
.margin-top-40 {
  margin-top: 40px;
}
.margin-bottom-5 {
  margin-bottom: 5px;
}
.margin-bottom-15 {
  margin-bottom: 15px;
}
.margin-bottom-20 {
  margin-bottom: 20px;
}
.margin-bottom-25 {
  margin-bottom: 25px;
}
.margin-bottom-30 {
  margin-bottom: 30px;
}
.margin-bottom-40 {
  margin-bottom: 40px;
}
.margin-left-5 {
  margin-left: 5px;
}
.margin-right-5 {
  margin-right: 5px;
}