/*!
 * Bootstrap v4.6.2 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size: 0.875em;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 0.875em;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "\2014\00A0";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 90%;
  color: #6c757d;
}

code {
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}

a > code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.row-cols-1 > * {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.row-cols-2 > * {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.row-cols-3 > * {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.row-cols-4 > * {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.row-cols-5 > * {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6 > * {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -ms-flex-order: 12;
  order: 12;
}

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.333333%;
}

.offset-5 {
  margin-left: 41.666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.333333%;
}

.offset-8 {
  margin-left: 66.666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.333333%;
}

.offset-11 {
  margin-left: 91.666667%;
}

@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-sm-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-sm-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-sm-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-sm-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-sm-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-sm-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-sm-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-sm-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-md-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-md-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-md-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-md-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-md-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-md-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-md-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-md-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-lg-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-lg-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-lg-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-lg-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-lg-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-lg-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-lg-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-lg-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-xl-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-xl-2 > * {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-xl-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-xl-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-xl-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-xl-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xl-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-xl-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-xl-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #b8daff;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #7abaff;
}

.table-hover .table-primary:hover {
  background-color: #9fcdff;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #9fcdff;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #d6d8db;
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
  border-color: #b3b7bb;
}

.table-hover .table-secondary:hover {
  background-color: #c8cbcf;
}

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #c8cbcf;
}

.table-success,
.table-success > th,
.table-success > td {
  background-color: #c3e6cb;
}

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
  border-color: #8fd19e;
}

.table-hover .table-success:hover {
  background-color: #b1dfbb;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #b1dfbb;
}

.table-info,
.table-info > th,
.table-info > td {
  background-color: #bee5eb;
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: #86cfda;
}

.table-hover .table-info:hover {
  background-color: #abdde5;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #abdde5;
}

.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #ffeeba;
}

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
  border-color: #ffdf7e;
}

.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #ffe8a1;
}

.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f5c6cb;
}

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
  border-color: #ed969e;
}

.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f1b0b7;
}

.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
  border-color: #fbfcfc;
}

.table-hover .table-light:hover {
  background-color: #ececf6;
}

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ececf6;
}

.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #c6c8ca;
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
  border-color: #95999c;
}

.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #b9bbbe;
}

.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.table-dark {
  color: #fff;
  background-color: #343a40;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #454d55;
}

.table-dark.table-bordered {
  border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm > .table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md > .table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg > .table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xl > .table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table-bordered {
  border: 0;
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.form-control:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
  line-height: 1.5;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

select.form-control[size], select.form-control[multiple] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
}

.form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
  color: #6c757d;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #28a745;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(40, 167, 69, 0.9);
  border-radius: 0.25rem;
}

.form-row > .col > .valid-tooltip,
.form-row > [class*="col-"] > .valid-tooltip {
  left: 5px;
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: #28a745;
  padding-right: calc(1.5em + 0.75rem) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated select.form-control:valid, select.form-control.is-valid {
  padding-right: 3rem !important;
  background-position: right 1.5rem center;
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:valid, .custom-select.is-valid {
  border-color: #28a745;
  padding-right: calc(0.75em + 2.3125rem) !important;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}

.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: #28a745;
}

.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
  color: #28a745;
}

.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
  border-color: #28a745;
}

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
  border-color: #34ce57;
  background-color: #34ce57;
}

.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #28a745;
}

.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
  border-color: #28a745;
}

.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}

.form-row > .col > .invalid-tooltip,
.form-row > [class*="col-"] > .invalid-tooltip {
  left: 5px;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated select.form-control:invalid, select.form-control.is-invalid {
  padding-right: 3rem !important;
  background-position: right 1.5rem center;
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:invalid, .custom-select.is-invalid {
  border-color: #dc3545;
  padding-right: calc(0.75em + 2.3125rem) !important;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
}

.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545;
}

.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
  color: #dc3545;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}

.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-inline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }
  .form-inline .form-check {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
  .form-inline .custom-control {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn.disabled, .btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-success:focus, .btn-success.focus {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-info:focus, .btn-info.focus {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-info.disabled, .btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warning:focus, .btn-warning.focus {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-warning.disabled, .btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #212529;
  background-color: #d39e00;
  border-color: #c69500;
}

.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

.btn-light:focus, .btn-light.focus {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}

.btn-light.disabled, .btn-light:disabled {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
  color: #212529;
  background-color: #dae0e5;
  border-color: #d3d9df;
}

.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}

.btn-dark:focus, .btn-dark.focus {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

.btn-dark.disabled, .btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1d2124;
  border-color: #171a1d;
}

.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #007bff;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:focus, .btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:focus, .btn-outline-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:focus, .btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:focus, .btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:focus, .btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:focus, .btn-outline-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-outline-light.disabled, .btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:focus, .btn-outline-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-outline-dark.disabled, .btn-outline-dark:disabled {
  color: #343a40;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.btn-link:focus, .btn-link.focus {
  text-decoration: underline;
}

.btn-link:disabled, .btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 0.5rem;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.collapsing.width {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing.width {
    transition: none;
  }
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

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

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

@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 768px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}

.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-toggle::after {
  vertical-align: 0;
}

.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}

.dropleft .dropdown-toggle::after {
  display: none;
}

.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #e9ecef;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
}

.dropdown-item.disabled, .dropdown-item:disabled {
  color: #adb5bd;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}

.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}

.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}

.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
  margin-left: -1px;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
  z-index: 3;
}

.input-group > .custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .custom-file {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group:not(.has-validation) > .form-control:not(:last-child),
.input-group:not(.has-validation) > .custom-select:not(:last-child),
.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label,
.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group.has-validation > .form-control:nth-last-child(n + 3),
.input-group.has-validation > .custom-select:nth-last-child(n + 3),
.input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label,
.input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-prepend,
.input-group-append {
  display: -ms-flexbox;
  display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}

.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}

.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}

.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  print-color-adjust: exact;
}

.custom-control-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #80bdff;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d;
}

.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: 1px solid #adb5bd;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: 50% / 50% 50% no-repeat;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-switch {
  padding-left: 2.25rem;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.75rem);
  transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-select:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.custom-select[multiple], .custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

.custom-select::-ms-expand {
  display: none;
}

.custom-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
}

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-file-input[disabled] ~ .custom-file-label,
.custom-file-input:disabled ~ .custom-file-label {
  background-color: #e9ecef;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}

.custom-file-input ~ .custom-file-label[data-browse]::after {
  content: attr(data-browse);
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + 0.75rem);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse";
  background-color: #e9ecef;
  border-left: inherit;
  border-radius: 0 0.25rem 0.25rem 0;
}

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-range:focus {
  outline: 0;
}

.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-range::-moz-focus-outer {
  border: 0;
}

.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}

.custom-range::-webkit-slider-thumb:active {
  background-color: #b3d7ff;
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}

.custom-range::-moz-range-thumb:active {
  background-color: #b3d7ff;
}

.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    -ms-transition: none;
    transition: none;
  }
}

.custom-range::-ms-thumb:active {
  background-color: #b3d7ff;
}

.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}

.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}

.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-moz-range-track {
  cursor: default;
}

.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}

.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-link:hover, .nav-link:focus {
  text-decoration: none;
}

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-link {
  margin-bottom: -1px;
  background-color: transparent;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  background: none;
  border: 0;
  border-radius: 0.25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #007bff;
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.navbar .container,
.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover, .navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler:hover, .navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: 50% / 100% 100% no-repeat;
}

.navbar-nav-scroll {
  max-height: 75vh;
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

.navbar-expand {
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.navbar-expand > .container,
.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
  padding-right: 0;
  padding-left: 0;
}

.navbar-expand .navbar-nav {
  -ms-flex-direction: row;
  flex-direction: row;
}

.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.navbar-expand > .container,
.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}

.navbar-expand .navbar-collapse {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-text a {
  color: #fff;
}

.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
  color: #fff;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
}

.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}

.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link + .card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
  border-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-top,
.card-img-bottom {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group > .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .card-group > .card {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion {
  overflow-anchor: none;
}

.accordion > .card {
  overflow: hidden;
}

.accordion > .card:not(:last-of-type) {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion > .card:not(:first-of-type) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion > .card > .card-header {
  border-radius: 0;
  margin-bottom: -1px;
}

.breadcrumb {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.pagination {
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  z-index: 2;
  color: #0056b3;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link:focus {
  z-index: 3;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}

a.badge:hover, a.badge:focus {
  text-decoration: none;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.badge-primary {
  color: #fff;
  background-color: #007bff;
}

a.badge-primary:hover, a.badge-primary:focus {
  color: #fff;
  background-color: #0062cc;
}

a.badge-primary:focus, a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}

a.badge-secondary:hover, a.badge-secondary:focus {
  color: #fff;
  background-color: #545b62;
}

a.badge-secondary:focus, a.badge-secondary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.badge-success {
  color: #fff;
  background-color: #28a745;
}

a.badge-success:hover, a.badge-success:focus {
  color: #fff;
  background-color: #1e7e34;
}

a.badge-success:focus, a.badge-success.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
}

a.badge-info:hover, a.badge-info:focus {
  color: #fff;
  background-color: #117a8b;
}

a.badge-info:focus, a.badge-info.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.badge-warning {
  color: #212529;
  background-color: #ffc107;
}

a.badge-warning:hover, a.badge-warning:focus {
  color: #212529;
  background-color: #d39e00;
}

a.badge-warning:focus, a.badge-warning.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.badge-danger {
  color: #fff;
  background-color: #dc3545;
}

a.badge-danger:hover, a.badge-danger:focus {
  color: #fff;
  background-color: #bd2130;
}

a.badge-danger:focus, a.badge-danger.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}

a.badge-light:hover, a.badge-light:focus {
  color: #212529;
  background-color: #dae0e5;
}

a.badge-light:focus, a.badge-light.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

a.badge-dark:hover, a.badge-dark:focus {
  color: #fff;
  background-color: #1d2124;
}

a.badge-dark:focus, a.badge-dark.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert-primary hr {
  border-top-color: #9fcdff;
}

.alert-primary .alert-link {
  color: #002752;
}

.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-secondary hr {
  border-top-color: #c8cbcf;
}

.alert-secondary .alert-link {
  color: #202326;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-success hr {
  border-top-color: #b1dfbb;
}

.alert-success .alert-link {
  color: #0b2e13;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info hr {
  border-top-color: #abdde5;
}

.alert-info .alert-link {
  color: #062c33;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-warning hr {
  border-top-color: #ffe8a1;
}

.alert-warning .alert-link {
  color: #533f03;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-danger hr {
  border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
  color: #491217;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light hr {
  border-top-color: #ececf6;
}

.alert-light .alert-link {
  color: #686868;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

.alert-dark hr {
  border-top-color: #b9bbbe;
}

.alert-dark .alert-link {
  color: #040505;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  line-height: 0;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.progress-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: 1s linear infinite progress-bar-stripes;
  animation: 1s linear infinite progress-bar-stripes;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
    animation: none;
  }
}

.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}

.media-body {
  -ms-flex: 1;
  flex: 1;
}

.list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0.25rem;
}

.list-group-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit;
}

.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}

.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.list-group-item.disabled, .list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.list-group-item + .list-group-item {
  border-top-width: 0;
}

.list-group-item + .list-group-item.active {
  margin-top: -1px;
  border-top-width: 1px;
}

.list-group-horizontal {
  -ms-flex-direction: row;
  flex-direction: row;
}

.list-group-horizontal > .list-group-item:first-child {
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
}

.list-group-horizontal > .list-group-item:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
}

.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}

.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: 1px;
  border-left-width: 0;
}

.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: -1px;
  border-left-width: 1px;
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-sm > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 768px) {
  .list-group-horizontal-md {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-md > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-lg > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-xl > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

.list-group-flush {
  border-radius: 0;
}

.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
}

.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  color: #004085;
  background-color: #b8daff;
}

.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
  color: #004085;
  background-color: #9fcdff;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #004085;
  border-color: #004085;
}

.list-group-item-secondary {
  color: #383d41;
  background-color: #d6d8db;
}

.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
  color: #383d41;
  background-color: #c8cbcf;
}

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #383d41;
  border-color: #383d41;
}

.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}

.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
  color: #155724;
  background-color: #b1dfbb;
}

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}

.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}

.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
  color: #0c5460;
  background-color: #abdde5;
}

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}

.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}

.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
  color: #856404;
  background-color: #ffe8a1;
}

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}

.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}

.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
  color: #721c24;
  background-color: #f1b0b7;
}

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}

.list-group-item-light {
  color: #818182;
  background-color: #fdfdfe;
}

.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
  color: #818182;
  background-color: #ececf6;
}

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818182;
  border-color: #818182;
}

.list-group-item-dark {
  color: #1b1e21;
  background-color: #c6c8ca;
}

.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
  color: #1b1e21;
  background-color: #b9bbbe;
}

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #1b1e21;
  border-color: #1b1e21;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

.close:hover {
  color: #000;
  text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
  opacity: .75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
}

a.close.disabled {
  pointer-events: none;
}

.toast {
  -ms-flex-preferred-size: 350px;
  flex-basis: 350px;
  max-width: 350px;
  font-size: 0.875rem;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  border-radius: 0.25rem;
}

.toast:not(:last-child) {
  margin-bottom: 0.75rem;
}

.toast.showing {
  opacity: 1;
}

.toast.show {
  display: block;
  opacity: 1;
}

.toast.hide {
  display: none;
}

.toast-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.25rem 0.75rem;
  color: #6c757d;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.toast-body {
  padding: 0.75rem;
}

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}

.modal.modal-static .modal-dialog {
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer > * {
  margin: 0.25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }
  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
  padding: 0.4rem 0;
}

.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
  bottom: 0;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
  padding: 0 0.4rem;
}

.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}

.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
  padding: 0.4rem 0;
}

.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
  top: 0;
}

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
  padding: 0 0.4rem;
}

.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}

.popover .arrow::before, .popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
  margin-bottom: 0.5rem;
}

.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow {
  bottom: calc(-0.5rem - 1px);
}

.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: #fff;
}

.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
  margin-left: 0.5rem;
}

.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow {
  left: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
  left: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: #fff;
}

.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
  margin-top: 0.5rem;
}

.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow {
  top: calc(-0.5rem - 1px);
}

.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
  top: 1px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: #fff;
}

.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 1px solid #f7f7f7;
}

.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
  margin-right: 0.5rem;
}

.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow {
  right: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
  right: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
  right: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: #fff;
}

.popover-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 0.5rem 0.75rem;
  color: #212529;
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}

.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: 50% / 100% 100% no-repeat;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: .75s linear infinite spinner-border;
  animation: .75s linear infinite spinner-border;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  background-color: currentcolor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: .75s linear infinite spinner-grow;
  animation: .75s linear infinite spinner-grow;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.bg-primary {
  background-color: #007bff !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #0062cc !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #545b62 !important;
}

.bg-success {
  background-color: #28a745 !important;
}

a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #1e7e34 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #bd2130 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}

.bg-dark {
  background-color: #343a40 !important;
}

a.bg-dark:hover, a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #1d2124 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.border {
  border: 1px solid #dee2e6 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-right {
  border-right: 1px solid #dee2e6 !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-left {
  border-left: 1px solid #dee2e6 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.border-primary {
  border-color: #007bff !important;
}

.border-secondary {
  border-color: #6c757d !important;
}

.border-success {
  border-color: #28a745 !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #343a40 !important;
}

.border-white {
  border-color: #fff !important;
}

.rounded-sm {
  border-radius: 0.2rem !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-lg {
  border-radius: 0.3rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-print-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}

.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-sm-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-sm-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-sm-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-sm-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-sm-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-sm-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-sm-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-sm-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-sm-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-sm-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-sm-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-sm-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-md-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-md-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-md-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-md-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-md-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-md-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-md-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-md-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-md-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-md-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-md-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-md-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-md-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-md-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-md-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-md-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-md-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-md-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-md-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-lg-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-lg-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-lg-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-lg-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-lg-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-lg-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-lg-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-lg-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-lg-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-lg-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-lg-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-lg-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-xl-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-xl-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .flex-xl-grow-0 {
    -ms-flex-positive: 0 !important;
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  .justify-content-xl-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-xl-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }
  .align-items-xl-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .align-items-xl-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
  }
  .align-content-xl-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
  }
  .align-content-xl-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
  }
  .align-content-xl-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
  }
  .align-self-xl-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  .align-self-xl-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}

.user-select-all {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  user-select: all !important;
}

.user-select-auto {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

.user-select-none {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }
  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }
  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }
  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }
  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }
  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }
  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }
  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }
  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }
  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }
  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }
  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }
  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }
  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }
  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }
  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }
  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }
  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }
  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }
  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }
  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }
  .m-sm-n1 {
    margin: -0.25rem !important;
  }
  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-sm-n1,
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-sm-n1,
  .mx-sm-n1 {
    margin-left: -0.25rem !important;
  }
  .m-sm-n2 {
    margin: -0.5rem !important;
  }
  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-sm-n2,
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-sm-n2,
  .mx-sm-n2 {
    margin-left: -0.5rem !important;
  }
  .m-sm-n3 {
    margin: -1rem !important;
  }
  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }
  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }
  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }
  .m-sm-n4 {
    margin: -1.5rem !important;
  }
  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }
  .m-sm-n5 {
    margin: -3rem !important;
  }
  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -3rem !important;
  }
  .mr-sm-n5,
  .mx-sm-n5 {
    margin-right: -3rem !important;
  }
  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-sm-n5,
  .mx-sm-n5 {
    margin-left: -3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }
  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }
  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }
  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }
  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }
  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }
  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }
  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }
  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }
  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }
  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }
  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }
  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }
  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }
  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }
  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }
  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }
  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }
  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }
  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }
  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }
  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }
  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }
  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }
  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }
  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }
  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }
  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }
  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }
  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }
  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }
  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }
  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }
  .m-md-n1 {
    margin: -0.25rem !important;
  }
  .mt-md-n1,
  .my-md-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-md-n1,
  .mx-md-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-md-n1,
  .mx-md-n1 {
    margin-left: -0.25rem !important;
  }
  .m-md-n2 {
    margin: -0.5rem !important;
  }
  .mt-md-n2,
  .my-md-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-md-n2,
  .mx-md-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-md-n2,
  .mx-md-n2 {
    margin-left: -0.5rem !important;
  }
  .m-md-n3 {
    margin: -1rem !important;
  }
  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }
  .mr-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }
  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }
  .m-md-n4 {
    margin: -1.5rem !important;
  }
  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }
  .m-md-n5 {
    margin: -3rem !important;
  }
  .mt-md-n5,
  .my-md-n5 {
    margin-top: -3rem !important;
  }
  .mr-md-n5,
  .mx-md-n5 {
    margin-right: -3rem !important;
  }
  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-md-n5,
  .mx-md-n5 {
    margin-left: -3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }
  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }
  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }
  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }
  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }
  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }
  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }
  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }
  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }
  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }
  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }
  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }
  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }
  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }
  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }
  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }
  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }
  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }
  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }
  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }
  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }
  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }
  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }
  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }
  .m-lg-n1 {
    margin: -0.25rem !important;
  }
  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }
  .m-lg-n2 {
    margin: -0.5rem !important;
  }
  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }
  .m-lg-n3 {
    margin: -1rem !important;
  }
  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }
  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }
  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }
  .m-lg-n4 {
    margin: -1.5rem !important;
  }
  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }
  .m-lg-n5 {
    margin: -3rem !important;
  }
  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }
  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }
  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }
  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }
  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }
  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }
  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }
  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }
  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }
  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }
  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }
  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }
  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }
  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }
  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }
  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }
  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }
  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }
  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }
  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }
  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }
  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }
  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }
  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }
  .m-xl-n1 {
    margin: -0.25rem !important;
  }
  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }
  .m-xl-n2 {
    margin: -0.5rem !important;
  }
  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }
  .m-xl-n3 {
    margin: -1rem !important;
  }
  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }
  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }
  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }
  .m-xl-n4 {
    margin: -1.5rem !important;
  }
  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }
  .m-xl-n5 {
    margin: -3rem !important;
  }
  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }
  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }
  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }
  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }
  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

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

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

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

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

@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}

.text-lowercase {
  text-transform: lowercase !important;
}

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

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #007bff !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #0056b3 !important;
}

.text-secondary {
  color: #6c757d !important;
}

a.text-secondary:hover, a.text-secondary:focus {
  color: #494f54 !important;
}

.text-success {
  color: #28a745 !important;
}

a.text-success:hover, a.text-success:focus {
  color: #19692c !important;
}

.text-info {
  color: #17a2b8 !important;
}

a.text-info:hover, a.text-info:focus {
  color: #0f6674 !important;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:hover, a.text-warning:focus {
  color: #ba8b00 !important;
}

.text-danger {
  color: #dc3545 !important;
}

a.text-danger:hover, a.text-danger:focus {
  color: #a71d2a !important;
}

.text-light {
  color: #f8f9fa !important;
}

a.text-light:hover, a.text-light:focus {
  color: #cbd3da !important;
}

.text-dark {
  color: #343a40 !important;
}

a.text-dark:hover, a.text-dark:focus {
  color: #121416 !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  word-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .navbar {
    display: none;
  }
  .badge {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }
  .table-dark {
    color: inherit;
  }
  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: #dee2e6;
  }
  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}
/*# sourceMappingURL=../bootstrap/css/bootstrap.css.0d823bba2f5d.map */
/*  Home Information
    Copyright 2024-2026 by POMDP, LLC
    All Rights Reserved.  
*/
:root {
  --white: #fdfdfd;
  --black: #020204;
  --primary-color: #177072;
  --on-primary-color: #ffffff;
  --primary-highlight-color: #115354;
  --secondary-color: #F45F36;
  --on-secondary-color: #ffffff;
  --secondary-highlight-color: #F8AD98;
  --tertiary-color: #020204;
  --on-tertiary-color: #ffffff;
  --tertiary-highlight-color: #7e7e81;
  --success-color: #177219;
  --info-color: #177072;
  --on-success-color: #ffffff;
  --success-bg-light: #e8f5e8;
  --warning-color: #ECA500;
  --on-warning-color: #ffffff;
  --error-color: #721817;
  --on-error-color: #ffffff;
  --error-highlight-color: #a01111;
  --danger-color: var(--error-color);
  --muted-color: #7e7e81;
  --on-muted-color: #ffffff;
  --line-color: #cccccc;

  --edit-primary-bg-color: #dffeff;
  --edit-secondary-bg-color: #ffd0c3;
  --edit-tertiary-bg-color: #f0f0f0;

  /* Add missing semantic background variants */
  --warning-bg-light: #fef7e6;
  --info-bg-light: #e8f4f4;
  --muted-bg-light: #f8f9fa;

  /* Edit Mode Variables (for global edit mode styling) */
  --edit-mode-primary-bg: #FAD4C8;    /* Side panel background */
  --edit-mode-secondary-bg: #F5E6E1;  /* Main screen background */
  --edit-mode-tertiary-bg: #F5E6E1;   /* Top/bottom backgrounds */
  --edit-mode-border-color: #C65D3C;  /* Border color */
  --edit-mode-dash-color: #A94A32;    /* Dashed line color */
  --edit-hr-color: #a0a0a0;
  
  --top-buttons-height: 2.5rem;
  --bottom-buttons-height: 2.5rem;

  --status-highlighted-color: red;
  --status-hover-color: blue;

  --status-off-color: #aaaaaa;
  --status-on-color: yellow;
  --on-status-off-color: black;
  --on-status-on-color: black;
  
  /* These should match those in hi.apps.monitor.StatusStyle */
  --status-active-color: #DC3545;
  --status-recent-color: #FD7E14;
  --status-past-color: #FFD700;
  --status-ok-color: #177219;
  --status-bad-color: #a01111;
  --status-idle-color: #aaaaaa;

  --on-status-active-color: white;
  --on-status-recent-color: white;
  --on-status-past-color: black;
  --on-status-ok-color: white;
  --on-status-bad-color: white;
  --on-status-idle-color: black;

  /* Temperature ramp: blue (cold) -> green (pleasant) -> orange/red (hot).
     These should match those in hi.hi_styles.StatusStyle (STATUS_TEMP_*). */
  --status-temp-cold-color: #2c7fb8;
  --status-temp-cool-color: #74add1;
  --status-temp-pleasant-color: #1a9850;
  --status-temp-warm-color: #fdae61;
  --status-temp-hot-color: #d73027;

  --on-status-temp-cold-color: white;
  --on-status-temp-cool-color: black;
  --on-status-temp-pleasant-color: white;
  --on-status-temp-warm-color: black;
  --on-status-temp-hot-color: white;

  /* Panel size budgets. Soft enforcement: collection wrappers reference
     these via auto-fit/minmax for adaptive column counts; panels
     reference them when their content scales with the budget.
     See docs/dev/frontend/entity-state-panels.md. */
  --hi-panel-tile-min-size: 240px;
  --hi-panel-tile-target-size: 280px;
  --hi-panel-tile-max-size: 360px;
  --hi-panel-tile-large-min-size: 380px;
  --hi-panel-tile-small-min-size: 120px;
  --hi-panel-row-min-height: 56px;
  --hi-panel-row-target-height: 80px;
  --hi-panel-row-max-height: 128px;
  --hi-panel-default-tile-min-size: 160px;

  /* Ceiling for a video-pane image/clip's rendered height. Landscape
     cameras stay well under this (so they fill width as before); portrait
     cameras are clamped here and letterboxed via object-fit so they fit
     on screen instead of overflowing to ~2x the height. The two named
     tokens are the menu of sizes; --hi-video-max-height is the active one,
     defaulting to standard and re-pointed to compact by .hi-video-compact. */
  --hi-video-max-height-standard: 60vh;
  --hi-video-max-height-compact: 40vh;
  --hi-video-max-height: var(--hi-video-max-height-standard);

  /* Ceiling for the hi_grid side panel width. Its content is designed for
     a narrow column and looks sparse past this, so on wide screens the
     side clamps here and MAIN reclaims the freed width. A no-op on
     small/medium screens, where the Bootstrap col-3 (25%) is already
     narrower than this. */
  --hi-side-max-width: 375px;

  /* Letterbox/backdrop fill behind a video that doesn't fill its container
     (e.g. a portrait clip in a landscape pane). A very dark, lightly
     teal-tinted neutral — softer than pure black and cohesive with
     --primary-color (#177072) — so the frame recedes without being stark. */
  --hi-video-letterbox-bg: #13201f;

}

html, body {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    height: 100%;
    color: #222233;
    background-color: var(--white);
}

a { color: var(--primary-color); }
a:hover,
a:focus,
a:active {
    opacity: 0.65;
    color: var(--primary-color);
}
a.plain {
    text-decoration: none;
    cursor: pointer;
    border-bottom: 0;
}
a.underline,
a.underline:visited {
    text-decoration: none;
    padding-bottom: 0.075rem;
    border-bottom: 2px solid var(--primary-color);
}

a.clickable-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.clickable-card:hover,
a.clickable-card:focus,
a.clickable-card:active {
    text-decoration: none;
    opacity: 0.75;
}

/* Home profile selection styles */
.profile-selection-container {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 4rem);
  margin: clamp(1rem, 3vh, 2rem) 0;
  flex-wrap: wrap;
}

.profile-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1rem, 2vh, 2.5rem) clamp(1.5rem, 3vw, 3rem) clamp(0.5rem, 1vh, 1.5rem);
  border: 2px solid var(--line-color);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  background: white;
  min-width: clamp(120px, 15vw, 220px);
  flex: 0 1 auto;
}

.profile-button:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(23, 112, 114, 0.2);
  text-decoration: none;
  color: inherit;
}

.profile-icon {
  width: clamp(60px, 8vw, 160px);
  height: clamp(60px, 8vw, 160px);
  max-width: 100%;
  margin-bottom: clamp(0.5rem, 1vh, 0.75rem);
}

.profile-label {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 500;
  white-space: nowrap;
  color: var(--tertiary-color);
}

/* Start empty layout link */
.start-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.start-empty-link:hover {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom-color: var(--primary-color);
}

.empty-layout-icon {
  width: 20px;
  height: 20px;
}

.text-primary {
    color: var(--primary-color) !important;
}
.text-secondary {
    color: var(--secondary-color) !important;
}
.text-on-primary {
    color: var(--on-primary-color) !important;
}
.text-white {
    color: var(--white) !important;
}
.text-black {
    color: var(--black);
}

.bg-primary, .bg-info, .btn-primary, .btn-info {
    color: var(--on-primary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-highlight-color) !important;
}
.bg-primary a, .bg-info a, .btn-primary a, .btn-info a {
    color: var(--on-primary-color);
}
.bg-primary a:hover,
.bg-primary a:focus,
.bg-primary a:active,
.bg-info a:hover,
.bg-info a:focus,
.bg-info a:active {
    opacity: 0.65;
    color: var(--on-primary-color);
}

.bg-secondary, .btn-secondary, .badge-secondary {
    color: var(--on-secondary-color) !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-highlight-color) !important;
}
.bg-secondary a {
    color: var(--on-secondary-color);
}
.bg-secondary a:hover,
.bg-secondary a:focus,
.bg-secondary a:active {
    opacity: 0.65;
    color: var(--on-secondary-color);
}

.bg-tertiary, .btn-tertiary {
    color: var(--on-tertiary-color) !important;
    background-color: var(--tertiary-color) !important;
    border-color: var(--tertiary-highlight-color) !important;
}
.bg-tertiary a {
    color: var(--on-tertiary-color);
}
.bg-tertiary a:hover,
.bg-tertiary a:focus,
.bg-tertiary a:active {
    opacity: 0.65;
    color: var(--on-tertiary-color);
}

/* Bootstrap doesn't ship an .alert-tertiary variant, so the weather   */
/* alerts banner falls back to no background when AlertSeverity.UNKNOWN */
/* maps the severity to "tertiary" (real NWS alerts routinely carry    */
/* severity = "Unknown" on advisory products like Special Weather       */
/* Statements). Filling the gap with neutral-grey tinted-bg styling    */
/* matching the visual rhythm of the other alert variants -- soft      */
/* enough to signal "no specific severity" rather than the heavier     */
/* near-black ``bg-tertiary`` treatment.                                */
.alert-tertiary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.bg-danger, .btn-error, .btn-danger {
    color: var(--on-error-color) !important;
    background-color: var(--error-color) !important;
    border-color: var(--error-highlight-color) !important;
}
.bg-danger a, .btn-error a, .btn-danger a {
    color: var(--on-error-color);
}
.bg-error a:hover,
.bg-error a:focus,
.bg-error a:active,
.bg-danger a:hover,
.bg-danger a:focus,
.bg-danger a:active {
    opacity: 0.65;
    color: var(--on-error-color);
}

.bg-muted, .btn-muted {
    color: var(--on-muted-color) !important;
    background-color: var(--muted-color) !important;
}

/* Add-action button. Reusable treatment for "create new X"             */
/* affordances. Dashed border + the edit-mode warm color: dashed is     */
/* the long-standing UX convention for "this slot is awaiting           */
/* content", and reusing the edit-mode dash color makes these buttons   */
/* visually cluster with the dashed bar borders that mark edit-mode    */
/* chrome. Differentiates from primary (nav), secondary (active        */
/* state), and tertiary (settings) so an "add" stands out at a         */
/* glance.                                                              */
.btn-add {
    color: var(--edit-mode-dash-color) !important;
    /* Light translucent warm fill rather than fully transparent. The   */
    /* edit-mode bar background is itself a warm tone, so a transparent */
    /* dashed button would be warm-on-warm with minimal contrast. The   */
    /* translucent chip gives the button presence as a discrete slot    */
    /* while preserving the dashed-create vocabulary.                    */
    background-color: rgba(169, 74, 50, 0.08) !important;
    border: 2px dashed var(--edit-mode-dash-color) !important;
}
.btn-add:hover,
.btn-add:focus,
.btn-add:active,
.btn-add.active {
    color: var(--edit-mode-dash-color) !important;
    background-color: rgba(169, 74, 50, 0.18) !important;
    border-color: var(--edit-mode-border-color) !important;
}
.btn-add:focus {
    box-shadow: 0 0 0 0.2rem rgba(169, 74, 50, 0.25) !important;
}

/* Outline Button Overrides */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--on-primary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-highlight-color) !important;
}
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 112, 114, 0.25) !important;
}

.btn-outline-secondary {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: var(--on-secondary-color) !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-highlight-color) !important;
}
.btn-outline-secondary:focus {
    box-shadow: 0 0 0 0.2rem rgba(244, 95, 54, 0.25) !important;
}

.btn-outline-tertiary {
    color: var(--tertiary-color) !important;
    border-color: var(--tertiary-highlight-color) !important;
    background-color: var(--muted-bg-light) !important;
}
.btn-outline-tertiary:hover,
.btn-outline-tertiary:focus,
.btn-outline-tertiary:active,
.btn-outline-tertiary.active {
    color: var(--on-tertiary-color) !important;
    background-color: var(--tertiary-color) !important;
    border-color: var(--tertiary-highlight-color) !important;
}
.btn-outline-tertiary:focus {
    box-shadow: 0 0 0 0.2rem rgba(244, 95, 54, 0.25) !important;
}

.btn-outline-danger {
    color: var(--error-color) !important;
    border-color: var(--error-color) !important;
    background-color: transparent !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
    color: var(--on-error-color) !important;
    background-color: var(--error-color) !important;
    border-color: var(--error-highlight-color) !important;
}
.btn-outline-danger:focus {
    box-shadow: 0 0 0 0.2rem var(--error-highlight-color) !important;
}

.interstitial-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    max-width: 1200px;
    margin: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.interstitial-body {
    padding: 1rem;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f4f4f4;
}

/* Phone Landscape (Side-by-Side) */
@media (min-aspect-ratio: 16/9) and (max-height: 600px) {
    .interstitial-page {
        flex-direction: row;
        gap: 2rem;
    }
    .interstitial-header {
        flex: 0 0 auto;
        padding: 0.5rem;
    }
    .interstitial-body {
        flex: 1;
        display: flex;
        align-items: center;
    }
}

#hi-top-content {
    height: calc( var(--top-buttons-height) - 1 );
    border-bottom: 1px solid var(--line-color);
}
#hi-bottom-content {
    height: var(--bottom-buttons-height);
    border-top: 1px solid var(--line-color);
}
#hi-top-content img,
#hi-bottom-content img {
    max-height: 2rem;
    width: auto;
}

/* Top/bottom button bars. The right (and top-center logo) groups        */
/* reserve their content width so the fixed app-nav controls are never   */
/* pushed off-screen by a long list of user-defined view buttons. The    */
/* left group takes the remaining width and scrolls horizontally on      */
/* overflow.                                                             */
.hi-button-bar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}
.hi-button-bar-fixed,
.hi-button-bar-center {
    flex: 0 0 auto;
}
.hi-button-bar-flex {
    flex: 1 1 auto;
    /* Override flexbox's default min-width:auto so this group can       */
    /* actually shrink below its children's intrinsic widths.            */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.hi-button-bar-flex > * {
    flex-shrink: 0;
}

/* Edit-mode sidebar tab strip. Three tabs (Items / View / Space) act  */
/* as visual chrome over the existing per-template side views: each    */
/* tab is just an antinode link to a different side-panel URL. The     */
/* "active" class is hardcoded into the loaded template, so there's    */
/* no client-side tab state.                                            */
.hi-edit-sidebar-tabs {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--line-color);
    /* Keep top-level domain switcher visible while the pane content    */
    /* scrolls underneath. Bg matches whichever wrapper bg the sidebar  */
    /* is showing (white in items mode, warm in detail modes) so the    */
    /* scrolled content can't bleed through.                            */
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--edit-mode-primary-bg);
}
.hi-edit-sidebar-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.hi-edit-sidebar-tab:hover {
    text-decoration: none;
    background-color: rgba(23, 112, 114, 0.05);
}
.hi-edit-sidebar-tab.active {
    color: var(--edit-mode-dash-color);
    border-bottom-color: var(--edit-mode-dash-color);
    background-color: var(--edit-mode-tertiary-bg);
}
.hi-edit-sidebar-tab.disabled {
    color: #aaa;
    pointer-events: none;
    cursor: default;
}
.hi-edit-sidebar-content {
    padding: 0.5rem;
}

/* Items-list mode: the entity rows carry status-based background      */
/* shading (in-view / unused) and integration logos authored on        */
/* white, so the edit-mode sidebar tint is overridden to white when    */
/* the items list template is loaded. ``:has()`` lets the parent       */
/* react to which child template was rendered without JS coordination, */
/* so the white extends edge-to-edge -- no scroll edge cases.           */
.hi-screen[hi-edit="True"] #hi-side-content:has(.entity-picker-container) {
    background: var(--white);
}

/* Touch-target utility. Apply alongside any visual treatment           */
/* (typically Bootstrap ``small``/``text-muted``) to give a small      */
/* text affordance the iOS-HIG 44px tap floor without changing how    */
/* it looks. Use anywhere a glyph-light link or icon needs to remain   */
/* finger-friendly on a wall-mounted tablet.                            */
.hi-tap-target {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
}
.hi-side {
    padding-left: 0;
    padding-right: 0;
    /* Clamp to min(col-3 25%, --hi-side-max-width): the cap only engages
       on wide screens; below it the 25% flex-basis governs unchanged.
       Paired with .scrollable-column flex-grow so MAIN reclaims the gap. */
    max-width: var(--hi-side-max-width);
}
#hi-side-content {
    height: calc(100vh - var(--top-buttons-height) - var(--bottom-buttons-height));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
#hi-side-content hr {
    flex: 0 0 auto; /* Prevent shrinking or growing */
    width: 100%;
}
#hi-top-content,
#hi-bottom-content,
.hi-screen {
    background: var(--white);
}

/* Edit Mode Styling - Warm color scheme with dashed borders */
#hi-top-content[hi-edit="True"] {
    background: var(--edit-mode-tertiary-bg);
    border-bottom: 4px dashed var(--edit-mode-dash-color);
    box-shadow: inset 0 -2px 8px rgba(212, 119, 94, 0.1);
}

#hi-bottom-content[hi-edit="True"] {
    background: var(--edit-mode-tertiary-bg);
    border-top: 4px dashed var(--edit-mode-dash-color);
    box-shadow: inset 0 2px 8px rgba(212, 119, 94, 0.1);
}

.hi-screen[hi-edit="True"] {
    background: linear-gradient(135deg, var(--edit-mode-secondary-bg) 0%, var(--white) 50%, var(--edit-mode-secondary-bg) 100%);
    box-shadow: inset 0 0 0 3px var(--edit-mode-secondary-bg);
    position: relative;
}

/* Side panel styling in edit mode */
.hi-screen[hi-edit="True"] #hi-side-content {
    background: var(--edit-mode-primary-bg);
    border-left: 4px dashed var(--edit-mode-dash-color);
}

.hi-screen {
    max-height: 100vh;
}
.scrollable-column {
    overflow-y: auto;
    max-height: 100vh;
    padding-top: var(--top-buttons-height);
    padding-bottom: var(--bottom-buttons-height);
    /* Grow past the col-9 75% to absorb the width freed when .hi-side is
       clamped on wide screens; no free space exists below the clamp, so
       this is a no-op there. */
    flex-grow: 1;
    max-width: none;
}
.fixed-column {
    overflow-y: auto;
    flex-shrink: 0;
    height: 100vh;
    max-height: 100vh;
    padding-top: var(--top-buttons-height);
    padding-bottom: var(--bottom-buttons-height);
    border-left: 1px solid var(--line-color);
}

.hi-modal-dialog-600 {
    max-width: 600px;
}
.hi-modal-dialog-700 {
    max-width: 700px;
}
.hi-modal-dialog-800 {
    max-width: 800px;
}

.modal-title-image img {
    max-height: 48px;
}
.modal-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}



/* General Vertical Tab Styling */
.hi-vertical-nav {
    min-width: 200px;
    border-right: 1px solid var(--line-color);
    padding: 1rem 0;
}

.hi-vertical-nav-header {
    padding: 0 1rem 1rem 1rem;
    border-bottom: 1px solid var(--line-color);
    margin-bottom: 0.5rem;
}

.hi-vertical-nav-link {
    display: block;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
    border-radius: 0;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
    min-height: 44px; /* Touch-friendly */
    display: flex;
    align-items: center;
}

.hi-vertical-nav-link:hover {
    background-color: #f8f9fa;
    color: var(--primary-color);
    text-decoration: none;
}

.hi-vertical-nav-link:focus {
    color: var(--primary-color);
    text-decoration: none;
}

.hi-vertical-nav-link.active {
    background-color: var(--primary-color);
    color: var(--on-primary-color);
}

.hi-vertical-nav-link.active:hover {
    background-color: var(--primary-highlight-color);
    color: var(--on-primary-color);
}

/* Responsive adjustments for vertical tabs */
@media (max-width: 767.98px) {
    .hi-vertical-nav {
        min-width: 150px;
    }
}


/* Pagination styling overrides for app theming */
.pagination-lg .page-link {
    color: var(--primary-color) !important;
    border-color: #dee2e6 !important;
    /* Force consistent height for all pagination buttons */
    height: 3rem !important;
    min-height: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 0.75rem !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

/* Ensure spans inside page-links don't affect height and are properly centered */
.pagination-lg .page-link span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.pagination-lg .page-link:hover {
    color: var(--primary-highlight-color) !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
}

.pagination-lg .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--on-primary-color) !important;
}

.pagination-lg .page-item.disabled .page-link {
    color: #6c757d !important;
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}


.btn-control {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    font-weight: bold;
}

input[type="number"] {
    max-width: 8rem;
}
.hi-location-view {
    justify-content: center;
    align-items: center;
    height: calc(100vh - var(--top-buttons-height) - var(--bottom-buttons-height) );
    touch-action: none;

}
.hi-location-view-svg {
    max-height: calc(100vh - var(--top-buttons-height) - var(--bottom-buttons-height) ); 
    width: auto;
    height: auto;
    display: block;
    cursor: pointer;
}    

.integration-title img {
    height: 2rem;
}

#hi-integration-settings nav {
    border-right: 1px solid #888888;
    height: calc( 100vh - var(--top-buttons-height) - var(--bottom-buttons-height) - 6rem);
    overflow-y: auto;
}
#hi-integration-settings nav hr {
    flex: 0 0 auto; /* Prevent shrinking or growing */
    width: 100%;
    border-top: 1px solid #202020;
}
.drag-over {
  border: 2px dashed #888888;
}

.form-group label {
    color: #060606 !important;
}
.input-group-text {
    color: var(--black);
    background-color: #f0f0f0;
}
select,
textarea,
input[type="text"],
input[type="password"],
.dropdown-menu {
    color: var(--black) !important;
    background-color: #f8f8f8 !important;
}

/* Location switcher dropdown items: touch-friendly heights and a       */
/* visible current-space marker (check icon + bold) so the user can    */
/* see which space they're on at a glance.                              */
.dropdown-item.plain {
    padding: 0.6rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.dropdown-item.plain.active {
    background-color: transparent;
    color: var(--primary-color);
    font-weight: 600;
}
.dropdown-item.plain.active:hover,
.dropdown-item.plain.active:focus {
    background-color: rgba(23, 112, 114, 0.05);
    color: var(--primary-color);
}

/* ADD NEW SPACE: same btn-add vocabulary as other "add" affordances   */
/* (top-bar ADD VIEW / ADD COLLECTION, entity-picker ADD NEW ITEM),    */
/* but at a lower visual weight appropriate to its dropdown context —  */
/* this is a secondary action accessed from a navigation menu, not a   */
/* primary CTA. ``box-sizing: border-box`` + a horizontal margin keep  */
/* the chip inset from the menu edges without pushing past the menu's  */
/* right border.                                                        */
.dropdown-item-add {
    box-sizing: border-box;
    width: calc(100% - 1rem);
    margin: 0.25rem 0.5rem;
    padding: 0.35rem 0.75rem !important;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--edit-mode-dash-color);
    border-radius: 0.25rem;
    color: var(--edit-mode-dash-color) !important;
    background-color: rgba(169, 74, 50, 0.06) !important;
    font-size: 0.9rem;
    font-weight: 500;
}
.dropdown-item-add:hover,
.dropdown-item-add:focus {
    background-color: rgba(169, 74, 50, 0.16) !important;
    border-color: var(--edit-mode-border-color) !important;
    color: var(--edit-mode-dash-color) !important;
}
.hi-custom-select .input-group-text {
    height: calc(1.5em + 0.75rem + 2px);
    line-height: 1.5;
}
#hi-server-error-msg {
    position: fixed;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    padding: 2rem 3rem;
    min-width: 22rem;
    text-align: center;
    color: var(--on-secondary-color);
    background-color: var(--secondary-color);
    border-radius: 0.8rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}
#hi-server-error-msg .icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
}
#hi-server-error-msg .msg {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

svg[action-state="move"] {
    cursor: move;
}
svg[action-state="rotate"] {
    cursor: url("/static/css/cursor-rotate.96f37d213bb6.png") 16 16, auto;
}
svg[action-state="scale"] {
    cursor: url("/static/css/cursor-scale.ae2574ab3bfd.png") 16 16, auto;
}

svg .highlighted {
    filter: drop-shadow(0 0 10px var(--status-highlighted-color));
}

g.hi-icon {
    pointer-events: all;
    touch-action: manipulation;
    /* Suppress iOS Safari's callout (Copy/Define popup) and
       text-selection behaviors on the 750ms touch-hold the
       long-press gesture uses. ``touch-action: manipulation``
       governs gesture interpretation but not callouts/selection. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Hide background rectangles used for click targets */
.hi-entity-bg {
    fill: none !important;
    stroke: none !important;
    opacity: 0;
    pointer-events: all;
}

path.hi-path-closed[hover] {
}
path.hover-target {
    stroke: none;
    stroke-width: 10;
    fill: none;
    pointer-events: all;
}
path.hi-path-closed[hover] {
    stroke: var(--status-hover-color);
    stroke-width: 4;
}
path.hover-target[hover] + path.hi-path-open {
    stroke: var(--status-hover-color);
    stroke-width: 5;
    filter: drop-shadow(0 0 5px var(--status-hover-color));
}

g[status="active"] {
    filter: drop-shadow(0 0 5px var(--status-active-color));
}
g[status="recent"] {
    filter: drop-shadow(0 0 5px var(--status-recent-color));
}
g[status="partial"] {
    filter: drop-shadow(0 0 5px var(--status-recent-color));
}
g[status="past"] {
    filter: drop-shadow(0 0 5px var(--status-past-color));
}

g[status="off"] path.hi-state-bg  {
    fill: var(--status-off-color);
}
/* Base for every status-display chip. MUST precede the specific
 * .hi-status-display[status="..."] rules below: they share its
 * specificity (class + one attribute), so they only override it by
 * source order. Previously this sat after on/off/dim and silently
 * clobbered them. */
.hi-status-display[status] {
    display: inline-block;
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--black);
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 0.9em;
    line-height: 1.4;
    width: 10em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}
.hi-status-display[status="off"] {
    color: var(--on-status-off-color);
    background-color: var(--status-off-color);
}
g[status="on"] {
    filter: drop-shadow(0 0 5px var(--status-on-color));
}
g[status="on"] path.hi-state-bg {
    fill: var(--status-on-color);
}
/* Fan icons: spin the blades while "on" as a live state cue alongside the
 * on-glow. We rotate the blade path(s) -- NOT the placed <g> wrapper, whose
 * transform attribute carries the icon's position/scale (a CSS transform on
 * it would override that and move the icon). transform-box: fill-box pivots
 * relative to the path's own bounding box. */
@keyframes hi-fan-spin {
    to { transform: rotate( 360deg ); }
}
@media (prefers-reduced-motion: no-preference) {
    /* Ceiling fan: blades are their own path. The top blade reaches higher
     * than the bottom blades reach low, so the bbox center sits ~4% above
     * the hub -- nudge the y origin down to match. Eyeball-tune the second
     * value (try 52-56%) if it still wobbles. */
    g[status="on"] path.hi-entity-ceiling-fan-blades {
        transform-box: fill-box;
        transform-origin: 50% 54%;
        animation: hi-fan-spin 3s linear infinite;
    }
    /* Exhaust fan: blades, outer ring and center hub share one path, but the
     * ring and hub are circular so only the blades read as moving. The
     * dominant circular ring keeps the bbox centered on the true axis, so
     * plain center works without a tuned offset. */
    g[status="on"] path.hi-entity-exhaust-fan-lines {
        transform-box: fill-box;
        transform-origin: center;
        animation: hi-fan-spin 3s linear infinite;
    }
}
.hi-status-display[status="on"] {
    color: var(--on-status-on-color);
    background-color: var(--status-on-color);
}
g[status="dim"] {
    /* Smaller blur than "on" so the glow reads as less intense.
     * The opacity for the fill is handled on the .hi-state-bg path
     * below (via fill-opacity) so the SVG outline stays solid. */
    filter: drop-shadow(0 0 3px var(--status-on-color));
}
g[status="dim"] path.hi-state-bg {
    fill: var(--status-on-color);
    fill-opacity: 0.5;
}
.hi-status-display[status="dim"] {
    color: var(--on-status-on-color);
    background-color: var(--status-on-color);
    opacity: 0.5;
}

g[status="open"] {
    filter: drop-shadow(0 0 5px var(--status-bad-color));
}
g[status="connected"] {
    filter: drop-shadow(0 0 5px var(--status-ok-color));
}
g[status="disconnected"] {
    filter: drop-shadow(0 0 5px var(--status-bad-color));
}
g[status="degraded"] {
    filter: drop-shadow(0 0 5px var(--status-recent-color));
}
.hi-status-display[status="raid_ok"],
.hi-status-display[status="connected"] {
    color: var(--on-status-ok-color);
    background-color: var(--status-ok-color);
}
.hi-status-display[status="printing"],
.hi-status-display[status="degraded"] {
    color: var(--on-status-recent-color);
    background-color: var(--status-recent-color);
}
.hi-status-display[status="stopped"],
.hi-status-display[status="failed"],
.hi-status-display[status="disconnected"] {
    color: var(--on-status-bad-color);
    background-color: var(--status-bad-color);
}
.hi-status-display[status="idle"],
.hi-status-display[status="ok"],
.hi-status-display[status="high"] {
    color: var(--on-status-ok-color);
    background-color: var(--status-ok-color);
}
.hi-status-display[status="low"] {
    color: var(--on-status-bad-color);
    background-color: var(--status-bad-color);
}
.hi-status-display[status="smoke_clear"] {
    color: var(--on-status-ok-color);
    background-color: var(--status-ok-color);
}
.hi-status-display[status="smoke_detected"] {
    color: var(--on-status-bad-color);
    background-color: var(--status-bad-color);
}
.hi-status-display[status="moisture_clear"] {
    color: var(--on-status-ok-color);
    background-color: var(--status-ok-color);
}
.hi-status-display[status="moisture_detected"] {
    color: var(--on-status-bad-color);
    background-color: var(--status-bad-color);
}
.hi-status-display[status="co_clear"] {
    color: var(--on-status-ok-color);
    background-color: var(--status-ok-color);
}
.hi-status-display[status="co_detected"] {
    color: var(--on-status-bad-color);
    background-color: var(--status-bad-color);
}
.hi-status-display[status="gas_clear"] {
    color: var(--on-status-ok-color);
    background-color: var(--status-ok-color);
}
.hi-status-display[status="gas_detected"] {
    color: var(--on-status-bad-color);
    background-color: var(--status-bad-color);
}
.hi-status-display[status="object_person"],
.hi-status-display[status="object_car"],
.hi-status-display[status="object_animal"],
.hi-status-display[status="object_package"],
.hi-status-display[status="object_other"] {
    color: var(--on-status-active-color);
    background-color: var(--status-active-color);
}
.hi-status-display[status="object_none"] {
    color: var(--on-status-ok-color);
    background-color: var(--status-ok-color);
}
.hi-status-display[status="temperature_cold"] {
    color: var(--on-status-temp-cold-color);
    background-color: var(--status-temp-cold-color);
}
.hi-status-display[status="temperature_cool"] {
    color: var(--on-status-temp-cool-color);
    background-color: var(--status-temp-cool-color);
}
.hi-status-display[status="temperature_pleasant"] {
    color: var(--on-status-temp-pleasant-color);
    background-color: var(--status-temp-pleasant-color);
}
.hi-status-display[status="temperature_warm"] {
    color: var(--on-status-temp-warm-color);
    background-color: var(--status-temp-warm-color);
}
.hi-status-display[status="temperature_hot"] {
    color: var(--on-status-temp-hot-color);
    background-color: var(--status-temp-hot-color);
}

g[hover] {
    filter: drop-shadow(0 0 10px var(--status-hover-color)) !important;
}

.display-only-svg-icon {
    width: 2rem;
    height: auto;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}
.switch input:checked + .slider {
    background-color: var(--success-color);
}
.switch input:checked + .slider:before {
    transform: translateX(26px);
}

#hi-alert-banner-container {
}
.hi-alarm-level-info {
    color: var(--on-success-color);
    background-color: var(--success-color);
}

.hi-alarm-level-warning {
    color: var(--on-warning-color);
    background-color: var(--warning-color);
}

.hi-alarm-level-critical {
    color: var(--on-error-color);
    background-color: var(--error-color);
}

#hi-sleep-overlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    adding-bottom: 10px;
}

.row.flex-nowrap {
    flex-wrap: nowrap;
}
.weather-forecast-daily-col {
    min-width: 100px;
}

.details-popup-wrapper {
  position: relative;
}
.details-popup-summary {
  cursor: pointer;
}
.details-popup-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: white;
  border: 1px solid #ccc;
  padding: 1em;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* Getting Started Guide Styles */
.getting-started-sidebar {
    background: var(--white);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid var(--line-color);
}

.getting-started-guide {
    /* Content styles - with background and padding for when used without sidebar container */
    background: var(--white);
    border-radius: 0.5rem;
}

.getting-started-guide .guide-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-color);
}

.getting-started-guide .guide-header .hi-icon {
    margin-right: 0.5rem;
}

.getting-started-guide .guide-header h5 {
    margin: 0;
    color: var(--black);
    font-weight: 600;
}

.getting-started-guide .mode-explanation {
    background: var(--info-bg-light);
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--primary-color);
    border: 1px solid rgba(23, 112, 114, 0.3);
}

.getting-started-guide .mode-explanation .badge {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.getting-started-guide .steps {
    margin-bottom: 1rem;
}

.getting-started-guide .step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line-color);
}

.getting-started-guide .step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.getting-started-guide .step-number {
    background: var(--primary-color);
    color: var(--on-primary-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    margin-right: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.getting-started-guide .step-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.getting-started-guide .step-content strong {
    color: var(--black);
    font-size: 0.9rem;
}

.getting-started-guide .step-content .small {
    color: var(--muted-color);
    margin-top: 0.25rem;
    line-height: 1.3;
}
.getting-started-guide a:not(.plain) {
    color: var(--primary-color);
    text-decoration: underline;
}
.getting-started-guide a:not(.plain):hover {
    color: var(--primary-highlight-color);
}

.getting-started-guide .help-hint {
    display: flex;
    align-items: center;
    background: var(--muted-bg-light);
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--line-color);
}

.getting-started-guide .help-hint .hi-icon {
    margin-right: 0.5rem;
}

.getting-started-guide .help-hint small {
    color: var(--muted-color);
}

/* ================================= */
/* Editing Help Modal Styles        */
/* ================================= */

.editing-help-guide {
    font-size: 0.9rem;
}

.editing-help-guide .guide-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--line-color);
}

.editing-help-guide .guide-header h5 {
    margin: 0;
    color: var(--black);
    font-weight: 600;
}

.editing-help-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.editing-help-guide .help-category {
    background: var(--white);
    border: 1px solid var(--line-color);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.editing-help-guide .help-category:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.editing-help-guide .category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--muted-bg-light);
}

.editing-help-guide .category-icon {
    width: 32px;
    height: 32px;
    background: var(--info-bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.editing-help-guide .category-title {
    font-weight: 600;
    margin: 0;
    color: var(--black);
    font-size: 1rem;
}

.editing-help-guide .help-category-wide {
    grid-column: 1 / -1;
}

.editing-help-guide .help-actions-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}

.editing-help-guide .help-actions {
    list-style: none;
    padding: 0;
    margin: 0;
}

.editing-help-guide .help-actions li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--muted-bg-light);
}

.editing-help-guide .help-actions li:last-child {
    border-bottom: none;
}

.editing-help-guide .action-method {
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    background: var(--muted-bg-light);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    color: var(--primary-highlight-color);
    white-space: nowrap;
    font-weight: 600;
}

.editing-help-guide .action-description {
    flex: 1;
    color: var(--muted-color);
    font-size: 0.85rem;
}

.editing-help-guide .help-note {
    padding: 1rem;
    background: var(--warning-bg-light);
    border-radius: 0.5rem;
    border-left: 4px solid var(--secondary-color);
}

.editing-help-guide .note-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.editing-help-guide .note-title {
    font-weight: 600;
    color: var(--black);
    margin: 0;
    font-size: 0.9rem;
}

.editing-help-guide .note-content {
    margin: 0;
    color: var(--muted-color);
    font-size: 0.9rem;
}

/* Responsive behavior for smaller modals */
@media (max-width: 768px) {
    .editing-help-guide .editing-help-categories {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Monitor Health Status Styles */
.hi-modal-dialog-800 {
    max-width: 800px;
}

.monitor-status-badge {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
}

.monitor-status-healthy {
    background-color: var(--success-color);
    color: var(--on-success-color);
}

.monitor-status-warning {
    background-color: var(--warning-color);
    color: var(--on-warning-color);
}

.monitor-status-error {
    background-color: var(--error-color);
    color: var(--on-error-color);
}

/*
 * Health status badge — used by system/panes/health_status_badge.html
 * for the expanded button view. One class per HealthStatusType value.
 */
.hi-health-badge-healthy {
    background-color: var(--success-color);
    color: var(--on-success-color);
    border-color: var(--success-color);
}
.hi-health-badge-warning {
    background-color: var(--warning-color);
    color: var(--on-warning-color);
    border-color: var(--warning-color);
}
.hi-health-badge-error {
    background-color: var(--error-color);
    color: var(--on-error-color);
    border-color: var(--error-color);
}
.hi-health-badge-disabled {
    background-color: var(--muted-color);
    color: var(--on-muted-color, #fff);
    border-color: var(--muted-color);
}
.hi-health-badge-unknown {
    background-color: transparent;
    color: var(--muted-color);
    border-color: var(--muted-color);
}

/*
 * Compact integration-status indicator — used by integrations/panes/
 * integration_status_indicator.html for the sidebar nav-tab. Icon-only,
 * color drawn from semantic CSS variables. paused is informational
 * (muted), warning/error draw attention.
 */
.hi-integration-indicator {
    margin-left: 0.4rem;
    line-height: 1;
}
.hi-integration-indicator-error {
    color: var(--error-color);
}
.hi-integration-indicator-warning {
    color: var(--warning-color);
}
.hi-integration-indicator-paused {
    color: var(--muted-color);
}
.hi-integration-indicator-needs-sync {
    color: var(--info-color);
}

.text-success-custom {
    color: var(--success-color);
}

.text-warning-custom {
    color: var(--warning-color);
}

.text-error-custom {
    color: var(--error-color);
}

.text-muted-custom {
    color: var(--muted-color);
}

.heartbeat-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.heartbeat-healthy {
    background-color: var(--success-color);
    animation: heartbeat-pulse 2s infinite;
}

.heartbeat-stale {
    background-color: var(--warning-color);
}

.heartbeat-dead {
    background-color: var(--error-color);
}

@keyframes heartbeat-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.border-healthy { border-color: var(--success-color); }
.border-warning { border-color: var(--warning-color); }
.border-info { border-color: var(--info-color); }
.border-error { border-color: var(--error-color); }
.border-muted { border-color: var(--muted-color); }
.border-unknown { border-color: var(--muted-color); }

.api-source-section {
    border-left: 3px solid var(--line-color);
    padding-left: 1rem;
    margin-left: 0.5rem;
}

.api-source-healthy { border-left-color: var(--success-color); }
.api-source-warning { border-left-color: var(--warning-color); }
.api-source-info { border-left-color: var(--info-color); }
.api-source-error { border-left-color: var(--error-color); }
.api-source-muted { border-left-color: var(--muted-color); }
.api-source-unknown { border-left-color: var(--muted-color); }

.api-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.metric-item {
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    border-left: 3px solid var(--line-color);
}

.metric-item.success {
    border-left-color: var(--success-color);
}

.metric-item.warning {
    border-left-color: var(--warning-color);
}

.metric-item.error {
    border-left-color: var(--error-color);
}

.metric-item.muted {
    border-left-color: var(--muted-color);
}

.metric-value {
    font-weight: 600;
    font-size: 1.1rem;
}

/* ================================================
   PWA-specific styles for full screen mode
   ================================================ */

/* Fullscreen mode styles when app is installed as PWA */
@media all and (display-mode: fullscreen) {
    body {
        /* Remove any default margins/padding that might appear */
        margin: 0;
        padding: 0;
        /* Ensure content uses full viewport */
        min-height: 100vh;
        /* Prevent overscroll bounce on iOS */
        overscroll-behavior: none;
    }

    /* Hide browser UI elements that might still be visible */
    .browser-ui-hint {
        display: none;
    }
}

/* Standalone mode styles (iOS Safari, Chrome mobile) */
@media all and (display-mode: standalone) {
    body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        overscroll-behavior: none;
        /* Add safe area padding for devices with notches */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Adjust main content area for safe areas */
    .container-fluid {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
}

/* Landscape orientation optimizations (tablet primary use case) */
@media (orientation: landscape) and ((display-mode: fullscreen) or (display-mode: standalone)) {
    /* Optimize layout for landscape orientation */
    .row {
        /* Ensure full width usage in landscape */
        margin-left: 0;
        margin-right: 0;
    }

    /* Tablet-specific touch optimizations */
    button, .btn, .form-control, select {
        /* Ensure touch targets are at least 44px (Apple HIG) */
        min-height: 44px;
        /* Add more comfortable padding for touch */
        padding: 10px 16px;
    }

    /* Optimize modal dialogs for landscape */
    .modal-dialog {
        max-width: 80vw;
        margin: 2vh auto;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp icons and graphics on retina displays */
    img, svg {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* PWA installation prompt hiding (when app is already installed) */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .pwa-install-prompt {
        display: none !important;
    }
}

/* Entity Picker Styles. The container/panel wrappers are structural    */
/* only (they exist for ``:has()`` detection and for template parity   */
/* with downstream JS that may key off them). Sidebar background and   */
/* gutters live one layer up: ``#hi-side-content`` paints the white,   */
/* ``.hi-edit-sidebar-content`` owns the padding. Nothing here.        */

.entity-picker-header {
    background: var(--muted-bg-light);
    border-bottom: 1px solid var(--line-color);
    padding: 0.5rem;
    /* Stick below the sidebar tabs strip when scrolling. ``top`` is    */
    /* an approximation of the tabs' rendered height; both elements'    */
    /* z-index lets the tabs sit above this if values drift.            */
    position: sticky;
    top: 2.5rem;
    z-index: 10;
}

.entity-search-input {
    border-radius: 6px;
    border: 1px solid var(--line-color);
    padding: 8px 12px;
    font-size: 14px;
}

.filter-toggles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.entity-filter-btn {
    padding: 4px 12px;
    border: 1px solid var(--primary-color);
    background: var(--white);
    color: var(--primary-color);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.entity-filter-btn.active {
    background: var(--primary-color);
    color: var(--on-primary-color);
}

.entity-filter-btn:hover {
    background: var(--info-bg-light);
}

.entity-filter-btn.active:hover {
    background: var(--primary-highlight-color);
}

.entity-picker-items {
    /* No styling -- gutter is owned by .hi-edit-sidebar-content one    */
    /* layer up. Kept as a class hook for JS / template parity.         */
}

.entity-group-section {
    margin-bottom: 0.75rem;
}

.entity-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-color);
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
}

.entity-group-title {
    font-weight: 600;
    color: var(--tertiary-color);
    font-size: 14px;
    flex-grow: 1;
}

.entity-group-toggle {
    color: var(--muted-color);
    font-size: 12px;
    transition: transform 0.2s;
}

.entity-group-header[aria-expanded="false"] .entity-group-toggle {
    transform: rotate(-90deg);
}

.entity-group-items {
    margin-left: 8px;
}

.entity-item-row,
.collection-item-row {
    padding: 6px 0;
    margin-bottom: 2px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.entity-item-row form,
.collection-item-row form {
    display: flex;
    align-items: center;
    margin: 0;
}

.entity-item-row:hover,
.collection-item-row:hover {
    background: var(--muted-bg-light);
}

.entity-item-row.in-view,
.collection-item-row.in-view {
    background: var(--success-bg-light);
    border-left: 3px solid var(--primary-color);
    padding-left: 5px;
}

.entity-item-row.in-view:hover,
.collection-item-row.in-view:hover {
    background: var(--primary-color);
    color: var(--on-primary-color);
}

.entity-item-row.unused,
.collection-item-row.unused {
    border-left: 3px solid var(--warning-color);
    background: var(--warning-bg-light);
    padding-left: 5px;
}

.entity-item-row.unused:hover,
.collection-item-row.unused:hover {
    background: var(--secondary-highlight-color);
}

.entity-item-checkbox {
    margin-right: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.entity-item-label {
    font-size: 14px;
    cursor: pointer;
    flex-grow: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-item-id {
    font-size: 11px;
    color: var(--muted-color);
    margin-left: 6px;
}

/* Entity picker search clear button alignment */
.entity-search-clear {
    display: flex;
    align-items: center;
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.search-container .input-group-append {
    display: flex;
    align-items: stretch;
}

.search-container .input-group {
    display: flex;
    align-items: stretch;
}

.unused-indicator {
    color: var(--warning-color);
    font-size: 12px;
    margin-left: 8px;
}

.hidden {
    display: none !important;
}

/* Entity picker filter button grid layout */
.filter-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.filter-toggles .entity-filter-btn {
    flex: 1 1 45%;
    min-width: 0; /* Allow text truncation if needed */
}

/* ================================================================ */
/* Collection layouts                                               */
/* ================================================================ */
/* Three per-CollectionViewType wrappers; column counts come from   */
/* CSS auto-fit + minmax referencing the panel size budgets.        */

.collection-tile-grid,
.collection-default {
    display: grid;
    gap: 16px;
    margin-bottom: 1rem;
}
.collection-tile-grid {
    grid-template-columns: repeat(
        auto-fit, minmax(var(--hi-panel-tile-min-size), 1fr)
    );
}
/* GRID_LARGE bumps the minimum tile size so each tile gets more
 * pixels; column count still adapts to container width (2 on
 * tablet, 3 on standard desktop, 4 on wide desktop). Used when
 * panel content benefits from larger presentation — camera streams,
 * dial-heavy panels, etc.
 */
.collection-tile-grid--large {
    grid-template-columns: repeat(
        auto-fit, minmax(var(--hi-panel-tile-large-min-size), 1fr)
    );
}
/* GRID_SMALL halves the minimum tile size so roughly twice as many
 * columns fit in the same container. Used for collections where
 * many simple panels (binary status, single value) benefit from a
 * denser layout. Cards also get a halved min-height so the aspect
 * ratio stays comparable to GRID rather than going tall-and-narrow.
 */
.collection-tile-grid--small {
    grid-template-columns: repeat(
        auto-fit, minmax(var(--hi-panel-tile-small-min-size), 1fr)
    );
}
.collection-tile-grid--small .entity-card--tile {
    min-height: var(--hi-panel-tile-small-min-size);
}
/* Sensor value chips inside the SMALL grid: the universal chip width
 * (10em) overflows the narrower cells produced by
 * --hi-panel-tile-small-min-size, so values truncate at the right edge.
 * Scoping by the wrapper class keeps this shrinkage isolated — GRID,
 * GRID_LARGE, LIST, and modal contexts continue to use the universal
 * chip metrics defined in .hi-status-display[status]. */
.collection-tile-grid--small .hi-status-display[status] {
    width: 8em;
    font-size: 0.8em;
    padding: 1px 6px;
}
.collection-default {
    grid-template-columns: repeat(
        auto-fit, minmax(var(--hi-panel-default-tile-min-size), 1fr)
    );
}

.collection-row-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1rem;
    /* Establish a container query context so ROW-context panels can
       use @container to adapt to actual content width (immune to
       sidebar / layout-chrome width that @media viewport queries
       cannot account for). */
    container-type: inline-size;
    container-name: collection-row;
}

/* ================================================================ */
/* Entity card wrapper                                              */
/* ================================================================ */
/* The wrapper is a <div data-async data-href> click target — see   */
/* docs/dev/frontend/entity-state-panels.md for the whole-card-     */
/* click contract.                                                  */

.entity-card {
    display: block;
    cursor: pointer;
    border: 1px solid var(--line-color);
    border-radius: 4px;
    background: var(--white);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.entity-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.entity-card--default {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}
.entity-card--default .entity-card__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.entity-card--default .entity-card__icon svg {
    width: 100%;
    height: 100%;
}
.entity-card--default .entity-card__name {
    font-weight: 500;
    color: var(--black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-card--tile {
    /* display: grid so the single panel child auto-stretches to fill
     * both axes — min-height alone wouldn't give the panel's height:100%
     * a resolvable parent height, leaving the card's white background
     * visible below the panel content. */
    display: grid;
    min-height: var(--hi-panel-tile-min-size);
    /* Override the default ``min-width: auto`` on grid items — without
     * this, long content (entity names, status chips) expands the cell
     * past its 1fr column width, then ``.entity-card { overflow: hidden }``
     * clips raw on the right rather than letting children truncate with
     * ellipsis. */
    min-width: 0;
}

.entity-card--row {
    display: grid;
    min-height: var(--hi-panel-row-min-height);
}

/* Edit mode: the entire card is a single click target opening the edit
 * pane. Inner interactive elements (live-view links, controllers) are
 * blocked at the CSS layer so panel authors don't need to gate their own
 * click handlers on edit mode — clicks never reach the inner elements,
 * they fall through to the card's data-async handler.
 */
[hi-edit="True"] .entity-card * {
    pointer-events: none;
}
[hi-edit="True"] .entity-card {
    pointer-events: auto;
}

/* ================================================================ */
/* Drag and Drop Styling                                            */
/* ================================================================ */

.collection-tile-grid .draggable,
.collection-default .draggable,
.collection-row-list .draggable {
    cursor: grab;
}
.collection-tile-grid .draggable:active,
.collection-default .draggable:active,
.collection-row-list .draggable:active {
    cursor: grabbing;
}
.collection-tile-grid .draggable.ui-sortable-helper,
.collection-default .draggable.ui-sortable-helper {
    transform: rotate(2deg) scale(1.05);
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.collection-row-list .draggable.ui-sortable-helper {
    background: var(--white);
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Drop zone styling */
.collection-grid .ui-sortable-placeholder {
    border: 2px dashed var(--primary-color);
    background: var(--info-bg-light);
    border-radius: 8px;
    min-height: 120px;
}

.collection-list .ui-sortable-placeholder {
    border: 2px dashed var(--primary-color);
    background: var(--info-bg-light);
    min-height: 60px;
    border-radius: 4px;
    margin: 5px 0;
}

/* List view card styling for thin rows */
.collection-list .card {
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    border: 1px solid var(--line-color);
}

.collection-list .card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.collection-list .card-body {
    padding: 0.75rem !important;
}

.collection-list .entity-title-section {
    min-width: 200px;
}

/* ================================= */
/* Entity Display Category Styling */
/* ================================= */

/* Entity category-specific styling for visual distinction */
.entity-item.plain .card {
    border-left: 3px solid var(--muted-color);
}

.entity-item.has-state .card {
    border-left: 3px solid var(--primary-color);
}

.entity-item.has-video .card {
    border-left: 3px solid var(--secondary-color);
}

/* List view category styling - solid borders on cards */
.entity-row.plain .card {
    border-left: 3px solid var(--muted-color);
}

.entity-row.has-state .card {
    border-left: 3px solid var(--primary-color);
}

.entity-row.has-video .card {
    border-left: 3px solid var(--secondary-color);
}

/* Enhanced grid card styling per category */
.collection-grid .entity-item.plain .card:hover {
    border-left-color: var(--muted-color);
    border-left-width: 4px;
}

.collection-grid .entity-item.has-state .card:hover {
    border-left-color: var(--primary-color);
    border-left-width: 4px;
}

.collection-grid .entity-item.has-video .card:hover {
    border-left-color: var(--secondary-color);
    border-left-width: 4px;
}

/* List view entity category hover styles */
.collection-list .entity-row.plain .card:hover {
    border-left-color: var(--muted-color);
    border-left-width: 4px;
}

.collection-list .entity-row.has-state .card:hover {
    border-left-color: var(--primary-color);
    border-left-width: 4px;
}

.collection-list .entity-row.has-video .card:hover {
    border-left-color: var(--secondary-color);
    border-left-width: 4px;
}

/* Sidebar form styling for narrow edit panels */
.sidebar-form-field {
    margin-bottom: 1rem;
}

.sidebar-form-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--tertiary-color);
    margin-bottom: 0.25rem;
    line-height: 1.2;
}
/* Marker for fields whose value differs from the server-rendered
   initial value. Paired with ``button[disabled]`` on the form's
   UPDATE button to make "unsaved changes" obvious at the field
   level as well as the action level. Set on the label by the
   ``Hi.updateFormDirtyState`` helper via ``oninput`` on the form. */
.sidebar-form-label.dirty::after {
    content: " \25CF";    /* small filled circle */
    /* Reuse the edit-mode emphasis color (dark brick red) so the
       indicator contrasts strongly against the peach
       ``--edit-mode-primary-bg`` panel and tracks any future
       edit-mode palette retheme. */
    color: var(--edit-mode-dash-color);
}

.sidebar-form-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--line-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    background-color: var(--white);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.sidebar-form-input:focus {
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 0.125rem rgba(23, 112, 114, 0.25);
}

.sidebar-form-input.is-invalid {
    border-color: var(--error-color);
}

.sidebar-form-error {
    display: block;
    font-size: 0.75rem;
    color: var(--error-color);
    margin-top: 0.25rem;
    line-height: 1.2;
}

.sidebar-form-actions {
    margin-top: 1.5rem;
    text-align: center;
}

.sidebar-form-actions .btn {
    min-width: 100px;
}

/* Custom select styling for sidebar forms */
.sidebar-form-field .hi-custom-select select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--line-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    background-color: var(--white);
}

/* ==================== */
/* SVG Template Cards   */
/* ==================== */

.hi-svg-template-card {
    width: 180px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hi-svg-template-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 13, 110, 253), 0.25);
}
.hi-svg-template-thumbnail {
    width: 160px;
    height: 120px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
}
.hi-svg-template-name {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    margin-top: 0.25rem;
}

/* ==================== */
/* Integration Sync Result Modal */
/* ==================== */

.hi-integration-logo {
    max-height: 24px;
    /* max-width clamps SVGs that lack intrinsic width/height
       attributes (browsers default unsized SVGs to ~300x150,
       which would distort the row layout). */
    max-width: 24px;
    width: auto;
    height: auto;
}

/* Card variant for grid layouts (e.g., Data Import page) where the
   logo carries primary recognition weight rather than acting as an
   indicator next to a label. */
.hi-integration-logo--card {
    max-height: 72px;
    max-width: 72px;
    width: auto;
    height: auto;
}

/* Smaller variant for inline contexts (entity detail badges,
   list-row item indicators) where 24px is too dominant. */
.hi-integration-logo--inline {
    max-height: 18px;
    max-width: 18px;
    width: auto;
    height: auto;
}

/* Detached variant: same dimensions as --inline, faded to signal
   the previously-attached state. Paired with the
   "Detached from <integration>" badge. */
.hi-integration-logo--detached {
    max-height: 18px;
    max-width: 18px;
    width: auto;
    height: auto;
    opacity: 0.6;
}

.hi-uppercase-label {
    letter-spacing: 0.05em;
}

.hi-sync-result-hero-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.hi-sync-result-stat-number {
    font-size: 2rem;
    line-height: 1;
}

/* Color-coded category section borders. The modifier names mirror
   Bootstrap's text-* utility vocabulary so callers pick the right
   color by semantic name, but the actual color values come from the
   project's brand theme variables for consistency with the
   project-overridden text utilities (e.g. .text-secondary renders
   --secondary-color, not Bootstrap grey). */
.hi-category-section {
    border-left: 3px solid var(--secondary-color);
}
.hi-category-section--secondary {
    border-left-color: var(--secondary-color);
}
.hi-category-section--info {
    border-left-color: var(--info-color);
}
.hi-category-section--success {
    border-left-color: var(--success-color);
}
.hi-category-section--danger {
    border-left-color: var(--danger-color);
}

/* Framework subheader rendered between the modal title bar and the
   panel body. Shows entity-type icon + label on the left, integration
   logo centered, and the modal-type label on the right. Panels
   render below this strip and don't repeat any of this identifying
   chrome. */
.hi-entity-status-subheader__type-icon .hi-entity-display-only-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

/* Light primary-tinted banner used as a section header (e.g., the
   entity-history modal's per-state group headers). Uses the same
   tint as ``.timeline-item:hover`` so the section header reads as
   part of the same visual family as the cards it groups. */
.hi-section-banner {
    background-color: var(--info-bg-light);
    border-left: 3px solid var(--primary-color);
    border-radius: 0.25rem;
}

.hi-sync-result-item-list {
    max-height: 160px;
    overflow-y: auto;
}

/* Diagnostic-notes list is taller than the per-category item lists
   because info messages tend to be longer and more numerous. */
.hi-sync-result-info-list {
    max-height: 200px;
    overflow-y: auto;
}

/* Wrapper around a finite-clip <img> + its replay-from-start
   overlay button. ``position: relative`` anchors the button to the
   image's top-right; ``display: block`` and ``line-height: 0`` let
   the wrapper shrink to the image's actual rendered dimensions so
   the overlay sits on the image, not on padding around it. */
.hi-video-clip {
    position: relative;
    display: block;
    line-height: 0;
}

/* Replay-from-start overlay button. Always visible (touch screens
   don't reliably support hover-reveal), semi-transparent backdrop
   so it reads against any video content underneath. */
.hi-video-clip-replay {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, background-color 0.15s ease,
                transform 0.05s ease;
    line-height: 1;
    z-index: 1;

    /* Touch-friendly behavior on tablets / phones. */
    touch-action: manipulation;            /* no 300ms tap delay */
    -webkit-tap-highlight-color: transparent;  /* suppress iOS gray flash */
    -webkit-touch-callout: none;           /* no long-press callout */
    user-select: none;
}

/* Extend the hit area outward to ~48x48 without changing the visual
   size of the button — meets the WCAG 2.5.5 / Apple HIG / Material
   touch-target guidance while keeping the icon compact on the video
   frame. Pseudo-element shares the button's pointer-events, so taps
   in the extended area dispatch the click handler. */
.hi-video-clip-replay::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
}

.hi-video-clip-replay:hover,
.hi-video-clip-replay:focus {
    opacity: 1;
    background: rgba(0, 0, 0, 0.75);
    outline: none;
}
.hi-video-clip-replay:active {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(0.92);
}

/* ===== Event definition (trigger rule) edit modal ===== */

.event-edit-field {
    margin-bottom: 0.6rem;
}
.event-edit-field .input-group-text {
    min-width: 9rem;
    background-color: #f5f5f5;
    border-color: var(--line-color);
}
.event-edit-field .form-control,
.event-edit-field .custom-select {
    flex: 1 1 auto;
}
.event-edit-field .form-error {
    display: block;
    margin-top: 0.15rem;
    padding-left: 0.25rem;
}

.event-edit-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}
.event-edit-toggle label {
    margin: 0;
}

.event-edit-section {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-color);
}
.event-edit-section-heading {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.event-edit-action-card {
    border: 1px solid var(--line-color);
    border-radius: 0.25rem;
    background-color: #fafafa;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.6rem;
}
.event-edit-action-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.event-edit-action-card-label {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
}
.event-edit-action-card-new {
    background-color: var(--white-bg-color);
}

.event-edit-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted-color);
    cursor: pointer;
}
.event-edit-remove input[type="checkbox"]:checked + span {
    color: var(--error-color);
    font-weight: 600;
}

.event-edit-add {
    margin: 0.5rem 0;
}

/* Placement modal — post-sync "Place new items" dispatcher. */

.hi-placement-overrides-panel {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 1rem;
}

.hi-placement-column-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.05em;
}

.hi-placement-group {
    border-bottom: 1px solid #e9ecef;
}

.hi-placement-group:last-child {
    border-bottom: none;
}

/* Per-item drill-down inside a group: left rule + indent so the
   item rows read as children of the group above them. */
.hi-placement-drill {
    border-left: 2px solid #ced4da;
    margin-left: 0.5rem;
    padding-left: 0.75rem;
}


/* ===== ICON SYSTEM ===== */

/* Base icon class */
.hi-icon {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Icon sizes */
.hi-icon-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.hi-icon-md {
    width: 1rem;
    height: 1rem;
}

.hi-icon-lg {
    width: 1.25rem;
    height: 1.25rem;
}

.hi-icon-xl {
    width: 1.5rem;
    height: 1.5rem;
}

/* Semantic icon colors using existing CSS variables */
.hi-icon-primary {
    color: var(--primary-color);
}

.hi-icon-secondary {
    color: var(--secondary-color);
}

.hi-icon-success {
    color: var(--success-color);
}

.hi-icon-warning {
    color: var(--warning-color);
}

.hi-icon-error {
    color: var(--error-color);
}

.hi-icon-muted {
    color: var(--muted-color);
}

/* Icon spacing utilities */
.hi-icon-left {
    margin-right: 0.375rem;
}

.hi-icon-right {
    margin-left: 0.375rem;
}

/* Icon button integration */
.btn .hi-icon {
    vertical-align: text-top;
}


/* Ensure icons work well in different contexts */
.card-header .hi-icon,
.card-title .hi-icon {
    margin-right: 0.375rem;
}

.alert .hi-icon {
    margin-right: 0.5rem;
}

/* Legacy icon class deprecation helpers */
.plus-icon,
.history-icon {
    /* These classes are deprecated. Use {% icon %} template tag instead */
    opacity: 0.7;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hi-icon {
        stroke-width: 2;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .hi-icon {
        transition: none;
    }
}

/* History icon styling - matches plus-icon pattern */
.history-icon {
    font-size: 1rem;
    color: var(--primary-color);
    padding: 0 0.25rem;
}
.plus-icon {
    font-size: 1.5rem;
    color: var(--on-primary-color);
    background-color: var(--primary-color);
    padding: 0 0.25rem 0 0.25rem;
}

/* Attribute V2 System Styles */

/* Container Structure */
.attr-v2-container {
    /* Remove default form margins for better layout control */
    margin: 0;
}

/* Sticky Panel (Entity Info + Action Bar - Always Visible) */
.attr-v2-sticky-panel {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--white);
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 0.75rem;
}

/* Entity Info Section (Minimal - Name/Type) */
.attr-v2-entity-info {
    padding: 0.5rem 0 0.25rem 0;
}

/* Action Bar */
.attr-v2-action-bar {
    padding: 0.25rem 0;
    background-color: var(--white);
}

.attr-v2-action-bar-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Left group: button and messages */
.attr-v2-action-bar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1; /* Take available space */
}

/* Message stack */
.attr-v2-message-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.attr-v2-update-btn {
    min-height: 44px; /* Touch-friendly primary action */
    min-width: 80px;
    padding: 0.75rem 1.5rem;
    flex-shrink: 0; /* Don't shrink button */
}

/* Right group: action buttons */
.attr-v2-action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0; /* Don't shrink buttons */
    margin-left: auto; /* Push to right */
}

.attr-v2-action-buttons button,
.attr-v2-action-buttons a.btn {
    min-height: 44px; /* Touch-friendly minimum */
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

/* <a class="btn"> doesn't vertically center its content the way
   <button> does; force-center so anchor-styled buttons line up
   with their button-element siblings in the action bar. */
.attr-v2-action-buttons a.btn {
    display: inline-flex;
    align-items: center;
}

.attr-v2-status-message {
    font-size: 0.875rem;
    color: var(--secondary-text-color);
    font-style: italic;
}

/* Status message variants */
.attr-v2-status-message.success {
    color: var(--success-color, #28a745);
    background-color: var(--success-bg-light);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-style: normal;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.attr-v2-status-message.success::before {
    content: '✓';
    font-weight: bold;
    color: var(--success-color, #28a745);
}

/* Scrollable Content Area (Natural Scrolling) */
.attr-v2-scrollable-content {
    padding: 1rem 0;
    /* Natural scrolling - no height restrictions or overflow settings */
}

/* Touch-friendly Form Controls - Consistent heights */
.attr-v2-container input,
.attr-v2-container select,
.attr-v2-container textarea {
    min-height: 44px; /* Touch-friendly minimum for form inputs */
    padding: 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

.attr-v2-container input[type="text"],
.attr-v2-container input[type="email"],
.attr-v2-container input[type="url"],
.attr-v2-container select {
    height: 44px; /* Exact height for single-line inputs */
}

.attr-v2-container textarea {
    min-height: 44px;
    resize: vertical;
}

/* Section Titles */
.attr-v2-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--secondary-text-color);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--line-color);
}

/* File Grid Layout */
.attr-v2-file-section {
    margin-bottom: 2rem;
}

/* Collapse the file section when it has no cards. The wrapper
   stays in the DOM (file_grid_html_id is the target for "Add
   File" insertions) but takes zero vertical space. */
.attr-v2-file-section:not(:has(.attr-v2-file-card)) {
    margin-bottom: 0;
}
.attr-v2-file-section:not(:has(.attr-v2-file-card)) .attr-v2-file-grid {
    margin-top: 0;
}

/* External-reference card: integration logo inside the open-link
   action button. Sized 24px so it reads as an icon at typical
   button height. */
.hi-ext-ref-integration-logo {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* Action buttons in any file-card actions row (native attribute
   file cards and the external-reference card both use
   ``attr-v2-file-actions``). inline-flex centers tall children
   (24px icons / integration logos) inside btn-sm's padded box;
   without this an img > line-height defaults to baseline-ish
   vertical alignment and visually sits high in the button. */
.attr-v2-file-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.attr-v2-file-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
}

.attr-v2-file-card {
    /* No border or padding on main card - components handle their own styling */
    border-radius: 0.375rem;
    background: transparent;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Maintain rounded corners */
}

.attr-v2-file-thumbnail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1rem;
    /* Diagonal hatch pattern background */
    background: repeating-linear-gradient(
        45deg,
        #f8f9fa,
        #f8f9fa 10px,
        #e9ecef 10px,
        #e9ecef 20px
    );
    border-radius: 0.375rem 0.375rem 0 0; /* Rounded top corners only */
    cursor: pointer;
}

.attr-v2-file-thumbnail.is-document {
    min-height: 140px;
}

.attr-v2-file-thumbnail.has-thumbnail {
    padding: 0;
    align-items: stretch;
    background: #1f2328;
    overflow: hidden;
    height: 180px;
}

.attr-v2-file-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.attr-v2-file-type-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-color);
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.attr-v2-file-info {
    flex-grow: 1;
    background: var(--white);
    border: 1px solid var(--line-color);
    border-top: none; /* No border on top - seamless with thumbnail */
    border-radius: 0 0 0.375rem 0.375rem; /* Rounded bottom corners only */
    padding: 0.75rem;
}

.attr-v2-file-name {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

/* File title input - styled to appear like text initially */
.attr-v2-file-title-input {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    word-break: break-word;
    
    /* Minimal styling - appears like text */
    border: 1px solid transparent;
    background: transparent;
    padding: 2px 4px;
    border-radius: 3px;
    width: 100%;
    transition: all 0.2s ease;
    
    /* Inherit text color and font */
    color: inherit;
    font-family: inherit;
    line-height: inherit;
}

/* Focused and activated state - stronger input appearance */
.attr-v2-file-title-input:focus,
.attr-v2-file-title-input.activated {
    border-color: var(--primary-color, #007bff);
    background: var(--white, #ffffff);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Hover state - subtle indication it's interactive */
.attr-v2-file-title-input:hover:not(:focus) {
    border-color: var(--line-color, #dee2e6);
    background: rgba(0, 0, 0, 0.02);
}

/* Attribute title input - styled to appear like text initially */
.attr-v2-title-input {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    word-break: break-word;
    letter-spacing: 0.5px;
    
    /* Minimal styling - appears like text */
    border: 1px solid transparent;
    background: transparent;
    padding: 2px 4px;
    border-radius: 3px;
    width: 100%;
    transition: all 0.2s ease;
    
    /* Inherit text color and font */
    color: inherit;
    font-family: inherit;
    line-height: inherit;
}
/* Focused and activated state - stronger input appearance */
.attr-v2-title-input:focus,
.attr-v2-title-input.activated {
    border-color: var(--primary-color, #007bff);
    background: var(--white, #ffffff);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}
/* Hover state - subtle indication it's interactive */
.attr-v2-title-input:hover:not(:focus) {
    border-color: var(--line-color, #dee2e6);
    background: rgba(0, 0, 0, 0.02);
}

/* URL-aware read/edit text mode */
.attr-v2-text-read-content {
    position: relative;
    border: 1px solid var(--line-color);
    border-radius: 0.375rem;
    padding: 0.75rem;
    background-color: var(--white, #ffffff);
    line-height: 1.4;
    word-break: break-word;
}

.attr-v2-text-read-content a {
    word-break: break-all;
}

.attr-v2-text-read-content.is-collapsed {
    max-height: calc((1.4em * 4) + 1.5rem);
    overflow: hidden;
}

.attr-v2-text-read-content.is-collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.75rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white, #ffffff));
    pointer-events: none;
}

.attr-v2-text-edit-mode {
    margin-top: 0.5rem;
}

.attr-v2-text-edit-actions {
    margin-top: 0.25rem;
    display: flex;
    justify-content: flex-end;
}

.attr-v2-text-cancel-btn {
    border: 0;
    background: transparent;
    color: var(--primary-color, #177072);
}

.attr-v2-text-cancel-btn:hover {
    border: 0;
    color: var(--primary-color-dark, #11595b);
    background-color: rgba(23, 112, 114, 0.08);
}

.attr-v2-text-cancel-btn:focus {
    border: 0;
    color: var(--primary-color, #177072);
    background-color: rgba(23, 112, 114, 0.08);
    box-shadow: 0 0 0 0.2rem rgba(23, 112, 114, 0.25);
}

/* Truncated textarea styling - indicate it's clickable */
.attr-v2-textarea.truncated[readonly] {
    cursor: pointer;
}
.attr-v2-textarea.truncated[readonly]:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.attr-v2-file-filename {
    font-size: 0.75rem;
    color: var(--muted-color);
    word-break: break-word;
}

.attr-v2-file-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-color);
}

.attr-v2-file-actions button {
    min-height: 44px; /* Touch-friendly minimum */
    min-width: 44px;
    padding: 0.375rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

/* Hide the "previous" reorder chevron on the first card and the
   "next" chevron on the last card. ``visibility: hidden`` (not
   ``display: none``) preserves the grid slot so the action row's
   ``mr-auto`` / ``ml-auto`` spacing for the middle cluster stays
   consistent across first / middle / last cards. The DOM-swap
   reorder path (``insertBefore``) retriggers ``:first-child`` /
   ``:last-child`` automatically -- no JS state to maintain. */
.attr-v2-file-grid > .attr-v2-file-card:first-child [data-reorder-action="left"],
.attr-v2-file-grid > .hi-ext-ref-card:first-child .hi-ext-ref-reorder-left {
    visibility: hidden;
}
.attr-v2-file-grid > .attr-v2-file-card:last-child [data-reorder-action="right"],
.attr-v2-file-grid > .hi-ext-ref-card:last-child .hi-ext-ref-reorder-right {
    visibility: hidden;
}

/* Reorder Controls - Overlay in upper right of thumbnail */
.attr-v2-reorder-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    flex-direction: row;
    gap: 1px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.25rem;
    padding: 2px;
    z-index: 1;
}

/* Disable thumbnail hover when hovering over reorder controls */
.attr-v2-file-thumbnail:hover:has(.attr-v2-reorder-controls:hover) {
    background-color: var(--background-color) !important;
    transform: none !important;
}

/* Enhance reorder controls hover state */
.attr-v2-reorder-controls:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Ensure buttons within controls maintain their hover states */
.attr-v2-reorder-controls button:hover {
    background-color: var(--background-color);
    border-color: var(--line-color);
}

/* JavaScript-based hover state override */
.attr-v2-file-thumbnail.reorder-hover:hover {
    background-color: var(--background-color) !important;
    transform: none !important;
}

/* Fallback for browsers that don't support :has() - JavaScript handles it */
@supports not selector(:has(*)) {
    .attr-v2-file-thumbnail:hover:has(.attr-v2-reorder-controls:hover) {
        /* This won't work in unsupported browsers, JS handles it instead */
    }
}

.attr-v2-reorder-controls button {
    /* Touch-friendly size with small visual appearance */
    min-width: 24px;
    min-height: 24px;
    padding: 6px;
    font-size: 10px;
    line-height: 1;
    border-radius: 0.25rem;
    position: relative;
    /* Center the small chevron icon within the larger touch area */
    display: flex;
    align-items: center;
    justify-content: center;
}

.attr-v2-reorder-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: var(--background-color);
    border-color: var(--line-color);
    color: var(--muted-color);
}

.attr-v2-reorder-controls button:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Attribute List Layout */
.attr-v2-attribute-section {
    margin-bottom: 2rem;
}

/* Collapse the attribute section when no saved-instance cards are
   present (only Django formset extras would render an
   ``attr-v2-new-attribute`` card; that card stays hidden until
   "Add Info" reveals it). The wrapper stays in the DOM so the
   formset's management form remains intact and "Add Info"'s
   reveal still finds its target. */
.attr-v2-attribute-section:not(:has(.attr-v2-attribute-card:not(.attr-v2-new-attribute))) {
    margin-bottom: 0;
}

.attr-v2-attribute-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attr-v2-attribute-card {
    border: 1px solid var(--line-color);
    border-radius: 0.375rem;
    padding: 0.75rem;
    background: var(--white);
    transition: all 0.2s ease;
}

.attr-v2-attribute-card[is_editable="false"] {
    background-color: #e0e0e0;
}
                                              
.attr-v2-attribute-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.attr-v2-attribute-name {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto; /* Allow to grow and shrink as needed */
    max-width: 70%; /* But don't take more than 70% to leave room for actions */
    min-width: 200px; /* Ensure minimum usable width */
}

.attr-v2-attribute-actions {
    display: flex;
    gap: 0.25rem;
}

.attr-v2-attribute-actions button {
    padding: 0.375rem;
    min-width: 44px; /* Touch-friendly minimum */
    min-height: 44px; /* Touch-friendly minimum */
    border: none;
    background: transparent;
    color: var(--secondary-text-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.attr-v2-attribute-actions button:hover {
    background: var(--background-color);
    color: var(--text-color);
}

.attr-v2-attribute-value {
    margin-top: 0.5rem;
}

/* Comprehensive Visual State System */


/* Error State (validation failures) */
.attr-v2-file-card.error,
.attr-v2-attribute-card.error {
    border-left: 3px solid var(--danger-color);
    background-color: rgba(220, 53, 69, 0.1);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.1);
}

.attr-v2-error-message {
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Loading State (during operations) */
.attr-v2-file-card.loading,
.attr-v2-attribute-card.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.attr-v2-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.attr-v2-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--line-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Success State (after successful operations) */
.attr-v2-file-card.success,
.attr-v2-attribute-card.success {
    border-left: 3px solid var(--success-color);
    background-color: var(--success-bg-light);
    transition: all 0.3s ease;
}

.attr-v2-success-message {
    color: var(--success-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}


.attr-v2-undo-delete {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--warning-color);
    border-radius: 0.25rem;
}

.attr-v2-undo-delete button {
    min-height: 32px;
    padding: 0.25rem 0.75rem;
}

/* Animation Keyframes */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* Smooth Transitions for All Interactive Elements */

/* Card State Transitions */
.attr-v2-file-card,
.attr-v2-attribute-card {
    transition: all 0.2s ease-in-out;
}

.attr-v2-file-card:hover,
.attr-v2-attribute-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Button Transitions */
.attr-v2-action-buttons button,
.attr-v2-action-buttons a.btn,
.attr-v2-file-actions button,
.attr-v2-attribute-actions button,
.attr-v2-reorder-controls button,
.attr-v2-update-btn {
    transition: all 0.15s ease;
}

.attr-v2-action-buttons button:hover,
.attr-v2-action-buttons a.btn:hover,
.attr-v2-file-actions button:hover,
.attr-v2-attribute-actions button:hover,
.attr-v2-reorder-controls button:hover:not(:disabled),
.attr-v2-update-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Form Element Transitions */
.attr-v2-container input,
.attr-v2-container select,
.attr-v2-container textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.attr-v2-container input:focus,
.attr-v2-container select:focus,
.attr-v2-container textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(23, 112, 114, 0.25);
    outline: none;
}

/* Enhanced focus states for buttons and interactive elements */
.attr-v2-action-buttons button:focus,
.attr-v2-action-buttons a.btn:focus,
.attr-v2-file-actions button:focus,
.attr-v2-attribute-actions button:focus,
.attr-v2-reorder-controls button:focus,
.attr-v2-update-btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(23, 112, 114, 0.25);
}

/* Update button prominence changes based on dirty state */
.attr-v2-update-btn.form-dirty {
    background-color: var(--primary-color, #007bff) !important;
    border-color: var(--primary-color, #007bff) !important;
    color: white !important;
}

.attr-v2-update-btn.form-dirty:hover {
    background-color: var(--primary-color-dark, #0056b3) !important;
    border-color: var(--primary-color-dark, #0056b3) !important;
    color: white !important;
}

.attr-v2-update-btn.form-dirty:focus {
    background-color: var(--primary-color, #007bff) !important;
    border-color: var(--primary-color, #007bff) !important;
    color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(23, 112, 114, 0.25) !important;
}

.attr-v2-reorder-controls button:focus:disabled {
    outline-color: var(--muted-color);
    box-shadow: 0 0 0 0.2rem rgba(126, 126, 129, 0.25);
}

/* Card focus states for keyboard navigation */
.attr-v2-file-card:focus-within,
.attr-v2-attribute-card:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Add form focus enhancement */
.attr-v2-add-form:focus-within {
    box-shadow: 0 4px 12px rgba(23, 112, 114, 0.15);
}

/* Add Form Animation */
.attr-v2-add-form {
    transition: all 0.3s ease;
    animation: fadeIn 0.3s ease when visible;
}

.attr-v2-add-form.collapsed {
    display: none;
}

.attr-v2-add-form:not(.collapsed) {
    animation: fadeIn 0.3s ease;
}

/* Status Message Transitions */
.attr-v2-status-message {
    transition: opacity 0.25s ease, color 0.25s ease;
}

/* Thumbnail Hover Effect */
.attr-v2-file-thumbnail {
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.attr-v2-file-thumbnail:hover {
    background-color: var(--primary-color-light, #e7f3ff);
    transform: scale(1.02);
}

/* Responsive Design - Mobile First with Tablet Primary */

/* Small screens - 2 columns for very narrow widths */
@media (max-width: 575px) {
    /* Adjust modal for very small screens */
    .hi-modal-dialog-700 {
        max-width: 95%;
        margin: 0.5rem;
    }
    
    /* File grid: 2 columns on very small screens */
    .attr-v2-file-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* Mobile Landscape (576px to 1023px) - Keep 3 columns */
@media (min-width: 576px) and (max-width: 1023px) {
    /* File grid maintains 3 columns */
    .attr-v2-file-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.875rem;
    }
    
    /* Action bar may stack buttons vertically on very small landscape */
    .attr-v2-action-bar-content {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    
    .attr-v2-action-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Attribute actions stack vertically */
    .attr-v2-attribute-actions {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-end;
    }
}

/* Tablet Landscape (1024px+) - PRIMARY TARGET */
@media (min-width: 1024px) {
    /* Optimal layout - all features at full capacity */
    .hi-modal-dialog-700 {
        max-width: 700px;
    }
    
    /* File grid: 3 columns optimal */
    .attr-v2-file-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    /* Action bar horizontal layout */
    .attr-v2-action-bar-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Enhanced hover effects for mouse/trackpad */
    .attr-v2-file-card:hover,
    .attr-v2-attribute-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
    
    /* Better button spacing */
    .attr-v2-attribute-actions {
        flex-direction: row;
        gap: 0.25rem;
    }
}

/* Desktop (1200px+) - SECONDARY TARGET */
@media (min-width: 1200px) {
    /* Enhanced layout with more space - maintain 3 columns */
    .attr-v2-file-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
    
    /* More generous spacing */
    .attr-v2-scrollable-content {
        padding: 1.5rem 0;
    }
    
    .attr-v2-attribute-list {
        gap: 1rem;
    }
    
    /* Enhanced hover effects */
    .attr-v2-file-card:hover,
    .attr-v2-attribute-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
    
    /* Larger touch targets can be more refined */
    .attr-v2-reorder-controls button,
    .attr-v2-attribute-actions button {
        min-width: 32px;
        min-height: 32px;
        padding: 8px;
    }
}

/* High DPI / Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows */
    .attr-v2-file-card,
    .attr-v2-attribute-card {
        border-width: 0.5px;
    }
    
    .attr-v2-sticky-panel {
        border-bottom-width: 0.5px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Touch-only devices: remove hover effects, ensure touch targets */
    .attr-v2-file-card:hover,
    .attr-v2-attribute-card:hover,
    .attr-v2-file-thumbnail:hover,
    .attr-v2-action-buttons button:hover,
    .attr-v2-action-buttons a.btn:hover,
    .attr-v2-file-actions button:hover,
    .attr-v2-attribute-actions button:hover {
        transform: none;
        box-shadow: none;
        background-color: initial;
    }
    
    /* Ensure all touch targets are adequate */
    .attr-v2-attribute-actions button,
    .attr-v2-file-actions button,
    .attr-v2-reorder-controls button {
        min-height: 44px; /* Touch-friendly standard */
        min-width: 44px;
        padding: 10px;
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    /* Disable animations for users who prefer reduced motion */
    .attr-v2-file-card,
    .attr-v2-attribute-card,
    .attr-v2-action-buttons button,
    .attr-v2-action-buttons a.btn,
    .attr-v2-file-actions button,
    .attr-v2-attribute-actions button,
    .attr-v2-reorder-controls button,
    .attr-v2-container input,
    .attr-v2-container select,
    .attr-v2-container textarea,
    .attr-v2-add-form,
    .attr-v2-file-thumbnail {
        animation: none;
        transition: none;
    }
    
    
    .attr-v2-loading-spinner {
        animation: spin 0.1s linear infinite;
    }
}

/* Add Attribute Form */
.attr-v2-add-form {
    border: 1px solid var(--line-color);
    border-radius: 0.375rem;
    background: var(--white);
    margin-top: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
}

.attr-v2-add-form.collapsed {
    display: none;
}

.attr-v2-add-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line-color);
    background: var(--background-color);
}

.attr-v2-add-form-header h6 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
}

.attr-v2-add-form-content {
    padding: 1rem;
}

.attr-v2-add-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-color);
}

/* Add form field layout improvements */
.attr-v2-add-form-content .row {
    align-items: end;
}

.attr-v2-add-form-content .custom-control {
    padding-top: 0.5rem;
}

/* Enhanced icon alignment for V2 components */
.attr-v2-action-buttons .hi-icon-left,
.attr-v2-file-actions .hi-icon,
.attr-v2-attribute-actions .hi-icon {
    vertical-align: middle;
}

.attr-v2-action-buttons button .hi-icon-left,
.attr-v2-action-buttons a.btn .hi-icon-left {
    margin-right: 0.5rem;
}

/* ====================================================================== */
/* SECRET FIELD STYLING                                                  */
/* ====================================================================== */

.attr-v2-secret-field {
    position: relative;
}

.attr-v2-secret-input-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}

.attr-v2-secret-input-wrapper input,
.attr-v2-secret-input-wrapper textarea {
    flex: 1;
    padding-right: 44px; /* Space for toggle button */
}

.attr-v2-secret-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    min-width: 36px;
    height: 36px;
    border: 1px solid #ced4da;
    background: var(--background-color);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attr-v2-secret-toggle:hover {
    background: var(--hover-background-color);
    border-color: #adb5bd;
}

.attr-v2-secret-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-color: var(--primary-color);
}

/* Secret field in hidden state */
.attr-v2-secret-field.hidden input,
.attr-v2-secret-field.hidden textarea {
    -webkit-text-security: disc;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1em;
}

/* Fallback for browsers that don't support text-security */
.attr-v2-secret-field.hidden input:not([type="password"]),
.attr-v2-secret-field.hidden textarea {
    color: transparent;
    text-shadow: 0 0 0 #495057;
}

/* Touch device optimizations */
@media (max-width: 768px) {
    .attr-v2-secret-toggle {
        min-width: 44px;
        height: 44px;
    }
}

/* Secret field readonly visual indicators */
.attr-v2-secret-input[readonly] {
    background-color: #f8f9fa;
    cursor: default;
    border-color: #dee2e6;
}

.attr-v2-secret-input[readonly]:focus {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    box-shadow: none;
}

/* When secret field is editable (shown), give it normal input styling */
.attr-v2-secret-input[type="text"]:not([readonly]) {
    background-color: #ffffff;
    cursor: text;
}

.attr-v2-secret-input[type="text"]:not([readonly]):focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(23, 112, 114, 0.25);
}

/* Secret checkbox positioning and alignment */
.attr-v2-secret-checkbox {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.attr-v2-secret-checkbox .custom-control {
    display: flex;
    align-items: center;
}

.attr-v2-secret-checkbox .custom-control-label {
    line-height: 1;
    padding-top: 0;
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* ====================================================================== */
/* V2 DIRTY STATE TRACKING STYLING                                       */
/* ====================================================================== */

/* Dirty message area in sticky panel */
.attr-v2-dirty-message {
    font-size: 0.875rem;
    color: transparent;
    transition: all 0.2s ease-in-out;
    min-width: 120px;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.attr-v2-dirty-message.active {
    color: #8B4513; /* Darker brown text for better contrast */
    background-color: #FFF3CD; /* Light warning background */
    border-left: 3px solid var(--warning-color);
    font-weight: 500;
}

/* Field-level dirty indicators */
.attr-v2-field-dirty {
    border-left: 3px solid var(--warning-color) !important;
    background-color: rgba(255, 193, 7, 0.05) !important;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.attr-v2-field-dirty:focus {
    border-left-color: var(--primary-color) !important;
    box-shadow: -3px 0 0 0 var(--primary-color), 0 0 0 0.2rem rgba(23, 112, 114, 0.25);
}

/* Dirty indicator dot */
.attr-v2-dirty-indicator {
    display: inline-block;
    margin-left: 0.5rem;
    color: var(--warning-color);
    font-size: 0.75rem;
    font-weight: bold;
    opacity: 0.8;
    animation: pulse 2s infinite;
}

/* Attribute name dirty styling - fallback approach for broader browser support */
.attr-v2-attribute-name.has-dirty-indicator {
    font-weight: 600;
    color: var(--warning-color);
}

/* Entity name dirty styling - fallback approach */
.form-group.has-dirty-field small {
    color: var(--warning-color);
    font-weight: 500;
}

/* Modern browser support with :has() */
@supports selector(:has(*)) {
    .attr-v2-attribute-name:has(.attr-v2-dirty-indicator) {
        font-weight: 600;
        color: var(--warning-color);
    }
    
    .form-group:has(.attr-v2-field-dirty) small {
        color: var(--warning-color);
        font-weight: 500;
    }
    
    .attr-v2-new-attribute .attr-v2-attribute-name:has(.attr-v2-dirty-indicator) {
        color: var(--primary-color);
    }
}

/* New attribute form dirty state - different styling */
.attr-v2-new-attribute .attr-v2-field-dirty {
    border-left-color: var(--primary-color) !important;
    background-color: rgba(23, 112, 114, 0.08) !important;
}

.attr-v2-new-attribute .attr-v2-dirty-indicator {
    color: var(--primary-color);
}

.attr-v2-new-attribute .attr-v2-attribute-name.has-dirty-indicator {
    color: var(--primary-color);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .attr-v2-dirty-indicator {
        animation: none;
        opacity: 1;
    }
    
    .attr-v2-field-dirty,
    .attr-v2-dirty-message {
        transition: none;
    }
}

/* ====================================================================== */
/* ADD ATTRIBUTE FORM STYLING                                             */
/* ====================================================================== */

.attr-v2-add-form {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: var(--background-color);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.attr-v2-add-form.collapsed {
    display: none;
}

.attr-v2-add-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--highlight-background-color);
    border-bottom: 1px solid #dee2e6;
}

.attr-v2-add-form-header h6 {
    margin: 0;
    font-weight: 600;
    color: var(--text-color);
}

.attr-v2-add-form-content {
    padding: 1rem;
}

.attr-v2-add-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

/* ====================================================================== */
/* COMPACT BASIC INFO HEADER                                              */
/* ====================================================================== */

.attr-v2-basic-info {
    background: var(--white);
    border: 1px solid var(--line-color);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.attr-v2-basic-info .row {
    margin-left: -0.375rem;
    margin-right: -0.375rem;
}

.attr-v2-basic-info [class*="col-"] {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

/* Force block layout for labels - very specific selector */
.attr-v2-basic-info .form-group small,
.attr-v2-basic-info .form-group .text-muted,
.attr-v2-basic-info small,
.attr-v2-basic-info .text-muted {
    display: block !important;
    font-size: 0.75rem !important;
    color: var(--muted-color) !important;
    margin-bottom: 0.25rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    line-height: 1 !important;
    clear: both !important;
}

.attr-v2-basic-info .form-control-sm {
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
    height: calc(1.5em + 0.75rem + 2px);
    width: 100%; /* Ensure full width */
}

.attr-v2-basic-info .form-control {
    width: 100%; /* Ensure full width for all form controls */
}

.attr-v2-basic-info select.form-control-sm {
    padding-right: 1.75rem;
    background-position: right 0.375rem center;
    background-size: 16px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure columns don't break layout */
.attr-v2-basic-info .col-md-8,
.attr-v2-basic-info .col-md-4,
.attr-v2-basic-info .col-sm-6 {
    min-width: 0; /* Allow flex shrinking */
}

/* Remove bottom margin from form groups in header */
.attr-v2-basic-info .form-group {
    margin-bottom: 0;
}

/* Error state styling */
.attr-v2-basic-info .form-control.is-invalid,
.attr-v2-basic-info .form-control:invalid {
    border-color: var(--danger-color);
}

.attr-v2-basic-info .invalid-feedback {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ====================================================================== */
/* ERROR MESSAGE STYLING                                                  */
/* ====================================================================== */

/* Non-field errors container - page level (owner form) */
.attr-v2-sticky-panel .attr-v2-non-field-errors {
    border-left: 3px solid #dc2626;
    padding-left: 1rem;
    margin: 0.5rem 0;
}

.attr-v2-sticky-panel .attr-v2-non-field-errors .attr-v2-error-item {
    color: #dc2626;
    font-size: 0.875rem;
    margin: 0.25rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.attr-v2-sticky-panel .attr-v2-non-field-errors .attr-v2-error-item:before {
    content: "•";
    color: #dc2626;
    font-weight: bold;
    flex-shrink: 0;
}

/* Formset non-form errors (same style as owner non-field errors) */
.attr-v2-formset-errors {
    border-left: 3px solid #dc2626;
    padding-left: 1rem;
    margin: 0.5rem 0;
}

.attr-v2-formset-errors .attr-v2-error-item {
    color: #dc2626;
    font-size: 0.875rem;
    margin: 0.25rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.attr-v2-formset-errors .attr-v2-error-item:before {
    content: "•";
    color: #dc2626;
    font-weight: bold;
    flex-shrink: 0;
}

/* Non-field errors - individual attribute card level (most subtle) */
.attr-v2-attribute-card .attr-v2-non-field-errors {
    margin: 0.5rem 0 0 0;
    padding: 0;
}

.attr-v2-attribute-card .attr-v2-non-field-errors .attr-v2-error-item {
    color: #dc2626;
    font-size: 0.8125rem;
    margin: 0.25rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.attr-v2-attribute-card .attr-v2-non-field-errors .attr-v2-error-item:before {
    content: "•";
    color: #dc2626;
    font-weight: bold;
    flex-shrink: 0;
}

/* Field-level errors */
.attr-v2-field-errors {
    color: #dc2626;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.attr-v2-field-errors .attr-v2-error-text {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.attr-v2-field-errors .attr-v2-error-text:before {
    content: "•";
    color: #dc2626;
    font-weight: bold;
    flex-shrink: 0;
}

/* Invalid form controls */
.attr-v2-attribute-card .form-control.is-invalid,
.attr-v2-basic-info .form-control.is-invalid {
    border-color: #dc2626;
    background-image: none;
}

.attr-v2-attribute-card .form-control.is-invalid:focus,
.attr-v2-basic-info .form-control.is-invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.25);
}

/* ====================================================================== */
/* INLINE HISTORY STYLING                                                */
/* ====================================================================== */

.attr-v2-inline-history {
    margin-top: 0.75rem;
}

.attr-v2-history-inline-content {
    background: var(--highlight-background-color);
    border: 1px solid var(--line-color);
    border-radius: 0.375rem;
    padding: 0.75rem;
    font-size: 0.875rem;
}

.attr-v2-history-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attr-v2-history-close {
    color: var(--danger-color);
    text-decoration: none;
}

.attr-v2-history-close:hover {
    color: var(--danger-color);
    text-decoration: none;
}

.attr-v2-history-current {
    font-size: 0.8125rem;
}

.attr-v2-history-current .badge-primary {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.attr-v2-history-toggle .btn-link {
    color: var(--text-color);
    text-decoration: none;
}

.attr-v2-history-toggle .btn-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.attr-v2-history-record {
    padding: 0.375rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.attr-v2-history-record:last-child {
    border-bottom: none;
}

.attr-v2-history-record .badge {
    font-size: 0.75rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: top;
}

.attr-v2-history-current .badge {
    font-size: 0.75rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: top;
}

.attr-v2-history-record .btn-xs {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    line-height: 1.2;
}

.attr-v2-history-toggle {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.attr-v2-history-empty {
    text-align: center;
    padding: 1rem 0;
    color: var(--muted-color);
}

/* ====================================================================== */
/* DELETION STATES WITH WATERMARKS                                       */
/* ====================================================================== */

/* File Card Deletion Styling */
.attr-v2-file-card.marked-for-deletion {
    opacity: 0.9;
    transition: all 0.3s ease;
}

.attr-v2-file-card.marked-for-deletion .attr-v2-file-thumbnail {
    position: relative;
    background: linear-gradient(rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.1)), 
                repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 10px, #e9ecef 10px, #e9ecef 20px);
}

.attr-v2-file-card.marked-for-deletion .attr-v2-file-thumbnail::after {
    content: "PENDING DELETION";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--danger-color);
    opacity: 0.3;
    text-transform: uppercase;
    letter-spacing: 2px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

.attr-v2-file-card.marked-for-deletion .attr-v2-file-info {
    border-color: var(--danger-color);
    background: rgba(220, 53, 69, 0.05);
}

/* Attribute Card Deletion Styling */
.attr-v2-attribute-card.marked-for-deletion {
    position: relative;
    background: rgba(220, 53, 69, 0.05);
    border-left: 4px solid var(--danger-color);
    overflow: hidden;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.attr-v2-attribute-card.marked-for-deletion::after {
    content: "PENDING DELETION";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--danger-color);
    opacity: 0.1;
    text-transform: uppercase;
    letter-spacing: 2px;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}

/* Keep inputs interactive but let watermark show through */
.attr-v2-attribute-card.marked-for-deletion .form-control,
.attr-v2-attribute-card.marked-for-deletion textarea,
.attr-v2-attribute-card.marked-for-deletion input {
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
}

/* Undo button visibility when marked for deletion */
.marked-for-deletion .attr-v2-delete-btn {
    display: none !important;
}

.marked-for-deletion .attr-v2-undo-btn {
    display: inline-flex !important;
}

/* ====================================================================== */
/* ENTITY EDIT MODAL V2 STYLING                                          */
/* ====================================================================== */

/* Delete icon colors standardized to red */
.attr-v2-attribute-actions .attr-v2-delete-btn {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.attr-v2-attribute-actions .attr-v2-delete-btn:hover {
    background-color: #dc3545 !important;
    color: white !important;
}

/* "Add New Attribute" form -- visual distinction */
.attr-v2-new-attribute {
    background-color: rgba(23, 112, 114, 0.05) !important;
    border: 2px dashed rgba(23, 112, 114, 0.3) !important;
    border-radius: 8px;
}

.attr-v2-new-attribute .attr-v2-attribute-header h6 {
    color: var(--primary-color);
    font-weight: 600;
    font-style: italic;
}


/* Add File and Add Attribute buttons -- consistent size */
.attr-v2-action-buttons label.btn {
    min-height: 44px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    cursor: pointer;
}

/* Attribute names/labels -- more prominent than values */
.attr-v2-attribute-name {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--primary-text-color) !important;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

/* Touch device optimizations */
@media (max-width: 768px) {

    .attr-v2-add-form-actions {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
}

/* External-data view (attr-ext-*) */

.attr-ext-header {
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    background: var(--info-bg-light);
    border-left: 3px solid var(--secondary-color);
    border-radius: 0.375rem;
}

.attr-ext-header__brand {
    gap: 0.5rem;
}

.attr-ext-header__logo {
    height: 16px;
    width: auto;
}

.attr-ext-attachments {
    margin-bottom: 1.5rem;
}

.attr-ext-attachment__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.attr-ext-attachment__link:hover,
.attr-ext-attachment__link:focus {
    color: inherit;
    text-decoration: none;
}

.attr-ext-attribute-list {
    margin-top: 0.5rem;
}

.attr-ext-attribute-card:hover,
.attr-ext-attribute-card:focus-within {
    border-color: var(--line-color);
    box-shadow: none;
}

.attr-ext-value {
    font-size: 0.9rem;
    color: var(--primary-text-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.attr-ext-value--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.attr-ext-more {
    padding-left: 0;
}

/* ====================================================================== */
/* ATTRIBUTE_REFERENCE picker                                             */
/* ====================================================================== */

/* Bootstrap's modal-dialog-scrollable shrinks the flex children of
   modal-content to fit the constrained height. The default Bootstrap
   markup has .modal-header / .modal-footer with flex-shrink:0 so only
   .modal-body shrinks; this project uses .modal-title in place of
   .modal-header, so we re-establish the contract here for any modal
   that opts into scrollable behavior. */
.modal-dialog-scrollable .modal-title,
.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
}

/* The picker modal opts into Bootstrap's modal-dialog-scrollable so the
   modal-body is the scroll container while the header and footer stay
   anchored. Pin the search controls to the top edge of the body so the
   operator can refine their query at any scroll position without
   scrolling back up to find the search row. */
.hi-ref-picker-search-form {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--background-color, #fff);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Zero the modal-body's top padding so the sticky search form is flush
   against the title -- otherwise modal-body's default padding-top shows
   scrolling content through the gap above the sticky element. The
   search form supplies its own padding-top for breathing room. */
.hi-ref-picker .modal-body {
    padding-top: 0;
}

/* Source banner -- always rendered. With one source the button is
   disabled (no caret, no hover affordance) so the visual matches
   the multi-source case structurally but doesn't invite a click
   that does nothing useful. The button face shows the source's
   logo on a light background; native logos meant for white render
   correctly here. */
.hi-ref-picker-source-banner {
    background-color: #fff;
    border: 1px solid var(--line-color, #dee2e6);
    padding: 0.5rem 0.75rem;
}
.hi-ref-picker-source-banner-logo {
    max-height: 24px;
    width: auto;
}
.hi-ref-picker-source-banner-label {
    font-weight: 500;
}
.hi-ref-picker-source-banner-single .dropdown-toggle::after {
    display: none;
}
.hi-ref-picker-source-banner-single .dropdown-toggle:disabled {
    opacity: 1;
    cursor: default;
}
.hi-ref-picker-source-option img {
    max-height: 20px;
    width: auto;
}

/* Hover-zoom for picker result thumbnails. Pure CSS: the wrapper
   carries a hidden native-size sibling image; ``:hover`` reveals
   it. ``pointer-events: none`` keeps the zoom from intercepting
   clicks on the row text it overlaps. ``z-index`` puts it above
   sibling rows but stays inside the modal body's scroll area;
   tall rows near the bottom can clip. */
.hi-ref-picker-thumb {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.hi-ref-picker-thumb-small {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
}
.hi-ref-picker-thumb-zoom {
    display: none;
    position: absolute;
    left: 64px;
    top: 0;
    max-width: 320px;
    max-height: 320px;
    background: #fff;
    border: 1px solid #6c757d;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    z-index: 10;
    pointer-events: none;
}
.hi-ref-picker-thumb:hover .hi-ref-picker-thumb-zoom {
    display: block;
}

/* Second hover trigger: the source-URL link in the row's text area
   also reveals the same zoom. ``:has()`` lets a sibling-of-thumb
   trigger (the link is in a deeper subtree) bubble back up and
   match the row, so a single zoom element serves both triggers. */
.hi-ref-picker-row:has(.hi-ref-picker-source-link:hover)
        .hi-ref-picker-thumb-zoom {
    display: block;
}



/* ==========================================
   Video Interface - Camera Event History
   ========================================== */


/* Camera button status styling */
.btn-camera[status="active"] {
    color: var(--on-status-active-color) !important;
    background-color: var(--status-active-color) !important;
    border-color: var(--status-active-color) !important;
    box-shadow: 0 0 5px var(--status-active-color);
}

.btn-camera[status="recent"] {
    color: var(--on-status-recent-color) !important;
    background-color: var(--status-recent-color) !important;
    border-color: var(--status-recent-color) !important;
    box-shadow: 0 0 3px var(--status-recent-color);
}

.btn-camera[status="past"] {
    color: var(--on-status-past-color) !important;
    background-color: var(--status-past-color) !important;
    border-color: var(--status-past-color) !important;
}

.btn-camera[status="idle"] {
    /* Default button styling - no changes needed */
}

/* Auto-view indicator styling */
/* Auto-view transient state styling */
.auto-view-active {
    border: 3px solid var(--warning-color) !important;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(236, 165, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

.auto-view-corner-badge {
    background-color: var(--warning-color);
    color: var(--on-warning-color);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15);
    width: auto;
    min-width: fit-content;
    backdrop-filter: blur(5px);
    pointer-events: none;
    border-top: 1px solid rgba(236, 165, 0, 0.3);
    border-left: 1px solid rgba(236, 165, 0, 0.3);
}

.auto-view-badge-icon {
    font-size: 14px;
    opacity: 0.9;
}

.auto-view-badge-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Removed pulse animation as requested */

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .auto-view-corner-badge {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .auto-view-badge-icon {
        font-size: 12px;
    }
}

/* Timeline Container */
.timeline-container {
    max-height: 600px;
    overflow-y: auto;
    background-color: var(--white);
    border-right: 1px solid var(--line-color);
    padding-right: 1rem;
}

/* Timeline Groups */
.timeline-group-label {
    color: var(--primary-color);
    padding: 8px 0;
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Timeline Items */
.timeline-item {
    padding: 10px;
    margin-bottom: 6px;
    border-left: 3px solid var(--line-color);
    transition: all 0.2s ease;
    border-radius: 0 4px 4px 0;
}

.timeline-item:hover {
    background-color: var(--info-bg-light);
    border-left-color: var(--primary-highlight-color);
    transform: translateX(2px);
}

.timeline-item.active {
    background-color: var(--info-bg-light);
    border-left-color: var(--secondary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-item .time {
    font-weight: 500;
    color: var(--black);
}

.timeline-item.active .time {
    color: var(--primary-color);
}

/* Video Container */
.video-container {
    border: 2px solid var(--line-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: var(--hi-video-letterbox-bg);
    min-height: 400px;
}

/* Covers both the MJPEG/snapshot <img> and the finite-clip <video>
   (an mp4 clip renders as <video class="img-fluid">, wrapped in
   .hi-video-clip). */
.video-container img,
.video-container video {
    display: block;
    width: 100%;
    height: auto;
    /* Width-driven sizing (landscape fills the pane, height follows the
       aspect ratio) until the height would exceed the cap — then clamp and
       letterbox so a portrait camera fits on screen rather than overflowing
       to ~2x the height. Landscape stays well under the cap, so object-fit
       is a no-op there and its sizing is unchanged. */
    max-height: var(--hi-video-max-height);
    object-fit: contain;
}

/* Compact variant for denser contexts (collection grid, alert-detail
   modal): a shorter cap so portrait media stays manageable where there is
   less room. Set on a container; it re-points the active cap variable to
   the compact token, which the .video-container media above (collection
   camera panels) pick up by inheritance, AND caps bare <img>/<video> media
   that aren't wrapped in a .video-container (the alert modal renders media
   directly in .hi-video-clip / a card body). */
.hi-video-compact {
    --hi-video-max-height: var(--hi-video-max-height-compact);
}
.hi-video-compact img,
.hi-video-compact video {
    max-height: var(--hi-video-max-height);
    object-fit: contain;
}

/* Event Header */
.response-header {
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 0.75rem;
}

.response-header h6 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Event Details Expansion Bar */
.response-details-bar {
    border-top: 1px solid var(--line-color);
    margin-top: 1.5rem;
}

.details-expander {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(to bottom, #f8f9fa, #f1f3f5);
    text-decoration: none;
    color: #6c757d;
    transition: all 0.2s ease;
    cursor: pointer;
}

.details-expander:hover {
    background: #e9ecef;
    text-decoration: none;
    color: #495057;
}

.details-expander:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    text-decoration: none;
}

.details-label {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.details-chevron {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.details-expander[aria-expanded="true"] .details-chevron {
    transform: rotate(180deg);
}

.details-content {
    padding: 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.detail-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.detail-value {
    font-size: 0.85rem;
    color: #212529;
    word-break: break-word;
}

/* Timeline Pagination */
.timeline-pagination-top,
.timeline-pagination-bottom {
    padding: 0.25rem;
}

.timeline-pagination-top .btn,
.timeline-pagination-bottom .btn {
    font-size: 0.8rem;
    padding: 0.4rem;
    transition: all 0.2s ease;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.timeline-pagination-top .btn:hover,
.timeline-pagination-bottom .btn:hover {
    transform: translateY(-1px);
    background-color: var(--primary-color);
    color: var(--on-primary-color);
}


/* ==========================================
   Loading States & Error Handling
   ========================================== */

/* Video Placeholder/Error State */
.video-placeholder {
    min-height: 400px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 8px;
    position: relative;
}

.video-placeholder-icon {
    color: var(--primary-color);
    opacity: 0.5;
}

.video-placeholder h5 {
    color: var(--primary-color);
    font-weight: 600;
}

.video-placeholder p {
    color: var(--black);
    opacity: 0.8;
}

/* Loading Animation for Video */
.video-container.loading {
    position: relative;
    min-height: 400px;
}

.video-container.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;
}

.video-container.loading::after {
    content: 'Loading video stream...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-color);
    font-weight: 500;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Error State for Timeline */
.timeline-container.error {
    background-color: var(--warning-bg-light);
    padding: 1rem;
    text-align: center;
}

.timeline-container.error::before {
    content: '⚠ Unable to load event history';
    color: var(--error-color);
    font-weight: 600;
}

/* ==========================================
   Accessibility & Keyboard Navigation
   ========================================== */

/* Focus indicators for keyboard navigation */
.timeline-item a:focus {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    border-radius: 4px;
}


/* High contrast mode support */
@media (prefers-contrast: high) {
    .timeline-item.active {
        border-left-width: 4px;
        font-weight: bold;
    }
    
    .timeline-group-label {
        border-bottom-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .timeline-item,
    .video-container.loading::before {
        transition: none;
        animation: none;
    }
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================
   Responsive Design - Landscape Optimized
   ========================================== */

/* Small landscape devices (landscape phones, 568px and up) */
@media (min-width: 568px) and (orientation: landscape) {
    .timeline-container {
        max-height: 400px;  /* Reduce height for smaller landscape screens */
    }
}

/* Medium landscape devices (tablets, 768px and up) */
@media (min-width: 768px) and (orientation: landscape) {
    .timeline-container {
        max-height: 500px;
    }
    
    /* Optimize column widths for landscape tablets */
    .entity-video-sensor-history .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .entity-video-sensor-history .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* Large landscape devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) and (orientation: landscape) {
    .timeline-container {
        max-height: 600px;
    }
    
    /* Wider timeline on larger screens */
    .entity-video-sensor-history .col-md-3 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    
    .entity-video-sensor-history .col-md-9 {
        flex: 0 0 80%;
        max-width: 80%;
    }
}

/* Extra large landscape devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .video-container {
        max-width: 1000px;  /* Limit video size on very large screens */
        margin: 0 auto;
    }
}

/* Landscape-specific optimizations */
@media (orientation: landscape) {
    /* Compact timeline items for landscape */
    .timeline-item {
        padding: 8px;
        margin-bottom: 4px;
    }
    
    .timeline-group-label {
        padding: 6px 0;
        margin-bottom: 8px;
    }
    
    
    /* Compact details bar in landscape */
    .details-expander {
        padding: 0.5rem 0.75rem;
    }
    
    .details-content {
        padding: 0.75rem;
    }
}

/* Handle small screens that don't meet minimum requirements */
@media (max-width: 767px) {
    /* Stack detail rows on mobile */
    .detail-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .detail-label {
        font-weight: 600;
        color: #495057;
    }
    
    .details-expander {
        padding: 0.6rem 0.75rem;
    }
    
    .details-label {
        font-size: 0.85rem;
    }
    /* Stack layout vertically on very small screens */
    .entity-video-sensor-history .row {
        flex-direction: column;
    }
    
    .entity-video-sensor-history .col-md-3,
    .entity-video-sensor-history .col-md-9 {
        max-width: 100%;
        width: 100%;
    }
    
    .timeline-container {
        max-height: 200px;
        margin-bottom: 1rem;
        border-right: none;
        border-bottom: 1px solid var(--line-color);
    }
}

/* Video Interface Header Styles */
.video-interface-header {
    border-bottom: 2px solid #e9ecef;
    padding: 0.75rem;
    margin: -0.75rem -0.75rem 0.75rem -0.75rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* Page-specific header backgrounds */
.video-interface-header.current-stream {
    background-color: var(--secondary-color);
    color: var(--on-secondary-color);
    border-bottom-color: var(--secondary-color);
}

.video-interface-header.event-history {
    background-color: var(--tertiary-color);
    color: var(--on-tertiary-color);
    border-bottom-color: var(--tertiary-color);
}

.entity-title {
    color: #343a40;
    font-weight: 600;
    font-size: 1.1rem;
}

.video-interface-header.current-stream .entity-title,
.video-interface-header.event-history .entity-title,
.video-interface-header.bg-primary .entity-title {
    color: inherit;
}

.last-activity-badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.video-interface-header.current-stream .last-activity-badge {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: inherit;
}

.video-interface-header.event-history .last-activity-badge,
.video-interface-header.bg-primary .last-activity-badge {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: inherit;
}

.video-nav-tabs {
    display: flex;
    gap: 0;
}

.video-nav-tab {
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #6c757d;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    transition: all 0.15s ease-in-out;
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.video-nav-tab:first-child {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.video-nav-tab:last-child {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-left: none;
}

.video-nav-tab:not(:first-child):not(:last-child) {
    border-left: none;
}

.video-nav-tab:hover:not(.disabled):not(.active) {
    color: #495057;
    background-color: #e9ecef;
    text-decoration: none;
}

.video-nav-tab.active {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    z-index: 1;
}

/* Active tab styling for colored headers */
.video-interface-header.current-stream .video-nav-tab.active {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--secondary-color);
    border-color: rgba(255, 255, 255, 0.9);
}

.video-interface-header.event-history .video-nav-tab.active {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--tertiary-color);
    border-color: rgba(255, 255, 255, 0.9);
}

/* Static snapshot uses ``bg-primary`` directly; mirror the active-tab
 * inversion the named banner classes get. */
.video-interface-header.bg-primary .video-nav-tab.active {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border-color: rgba(255, 255, 255, 0.9);
}

/* Inactive tab styling for colored headers */
.video-interface-header.current-stream .video-nav-tab:not(.active):not(.disabled),
.video-interface-header.event-history .video-nav-tab:not(.active):not(.disabled),
.video-interface-header.bg-primary .video-nav-tab:not(.active):not(.disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

.video-interface-header.current-stream .video-nav-tab:hover:not(.disabled):not(.active),
.video-interface-header.event-history .video-nav-tab:hover:not(.disabled):not(.active),
.video-interface-header.bg-primary .video-nav-tab:hover:not(.disabled):not(.active) {
    background-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.3);
}

.video-nav-tab.disabled {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-interface-header .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    
    .video-nav-tabs {
        width: 100%;
        justify-content: center;
    }
    
    .video-nav-tab {
        flex: 1;
        text-align: center;
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
    
    .entity-title {
        font-size: 1rem;
    }
    
    .last-activity-badge {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .video-nav-tab i {
        display: none; /* Hide icons on very small screens */
    }
    
    .video-nav-tab {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* Controller Styles - Common styling for all controller types */

/* Common Control Container Styles */
.on-off-control,
.discrete-control,
.hi-continuous-slider-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    min-width: 200px;
}

/* On/Off Switch Controller Styles */
.switch-modern {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
}

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

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 28px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch-input:checked + .switch-slider {
    background-color: var(--success-color, #28a745);
}

.switch-input:focus + .switch-slider {
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
}

.switch-input:checked + .switch-slider:before {
    transform: translateX(32px);
}

.switch-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.status-text {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color, #333);
    min-width: 2rem;
    text-align: center;
}

/* Discrete Select Controller Styles */
.discrete-select {
    min-width: 150px;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.discrete-select:focus {
    border-color: var(--primary-color, #007bff);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.discrete-select:hover {
    border-color: #adb5bd;
}

.discrete-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

.status-label {
    color: #6c757d;
    font-weight: 500;
}

.status-value {
    font-weight: 600;
    color: var(--text-color, #333);
}

/* Continuous-slider widget shared base. Used by brightness,
   hue, saturation, and color temperature sliders. Per-slider
   classes contribute the track gradient that gives the operator
   a visual reference for what the numeric value means. */
.hi-continuous-slider {
    width: 200px;
    height: 6px;
    border-radius: 3px;
    background: #ccc;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.hi-continuous-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color, #007bff);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hi-continuous-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color, #007bff);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hi-continuous-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: inherit;
    border: none;
}

.hi-continuous-slider:focus {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.hi-continuous-slider:hover::-webkit-slider-thumb {
    transform: scale(1.1);
}

.hi-continuous-slider:hover::-moz-range-thumb {
    transform: scale(1.1);
}

.hi-continuous-slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.5rem;
}

.hi-continuous-slider-extreme {
    font-size: 0.8rem;
    color: var(--text-color, #333);
    white-space: nowrap;
}

.hi-continuous-slider-display {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hi-continuous-slider-value {
    font-weight: bold;
    min-width: 3rem;
    text-align: center;
    font-size: 0.9rem;
}

.hi-continuous-slider-presets {
    display: flex;
    gap: 0.5rem;
}

.hi-continuous-slider-preset-btn {
    min-width: 3rem;
    font-size: 0.8rem;
}

/* Per-slider track gradients. These give a visual reference
   for the numeric scale without claiming to depict the bulb's
   current rendered color (the bulb may be in color_temp mode
   while the operator is dragging the hue slider). */

.hue-slider {
    background: linear-gradient(to right,
        hsl(0, 100%, 50%),
        hsl(60, 100%, 50%),
        hsl(120, 100%, 50%),
        hsl(180, 100%, 50%),
        hsl(240, 100%, 50%),
        hsl(300, 100%, 50%),
        hsl(360, 100%, 50%));
}

.saturation-slider {
    background: linear-gradient(to right, #999999, #cc4040);
}

.color-temperature-slider {
    background: linear-gradient(to right,
        #ff9d4d 0%,
        #ffd9b3 33%,
        #ffffff 66%,
        #cce0ff 100%);
}
/* Framework fallback panel for ROW and TILE contexts. Renders entity
 * icon + name plus a compact list of the first few states (controllers
 * + sensor values). Self-contained — the collection-card wrapper does
 * not add any chrome of its own.
 */

.hi-state-panel-fallback__icon {
    flex-shrink: 0;
}
.hi-state-panel-fallback__icon svg {
    width: 100%;
    height: 100%;
}
.hi-state-panel-fallback__name {
    font-weight: 600;
    color: var(--black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Override default ``min-width: auto`` on flex items — without this,
     * ``text-overflow: ellipsis`` never triggers because the flex item
     * refuses to shrink below its content's intrinsic width. Combined
     * with ``max-width: 100%`` (and the parent's own min-width: 0), the
     * name finally respects the grid cell boundary. */
    min-width: 0;
    max-width: 100%;
}

/* Per-state compact block: label above value/control. Both contexts
 * use the same per-state structure; the parent layout differs (the
 * row stacks states horizontally, the tile stacks them vertically).
 */
.state-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.state-compact__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6c757d);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.state-compact__value {
    font-size: 1rem;
    line-height: 1.2;
    overflow: hidden;
}
/* Compact form inside the value cell — strip the controller's default
 * row chrome (history button, oversized text-center label) that lives
 * in controller_data_row.html. The form widget itself stays
 * functional. */
.state-compact__value form {
    margin: 0;
}

/* ROW: icon left, name next, states stacked horizontally on the right. */
.hi-state-panel-fallback--row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    min-height: var(--hi-panel-row-min-height);
}
.hi-state-panel-fallback--row .hi-state-panel-fallback__icon {
    width: 32px;
    height: 32px;
}
.hi-state-panel-fallback--row .hi-state-panel-fallback__name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 1rem;
}
.hi-state-panel-fallback--row .state-compact {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 280px;
    margin-left: auto;
    align-items: flex-end;
}

/* TILE: icon centered atop name; states stacked vertically below. */
.hi-state-panel-fallback--tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    text-align: center;
    /* Allow this grid-item-as-flex-container to shrink below its
     * content's intrinsic width so name truncation propagates from
     * the cell boundary all the way to ``.hi-state-panel-fallback__name``. */
    min-width: 0;
}
.hi-state-panel-fallback--tile .hi-state-panel-fallback__icon {
    width: 48px;
    height: 48px;
}
.hi-state-panel-fallback--tile .hi-state-panel-fallback__name {
    font-size: 1rem;
    line-height: 1.2;
}
.hi-state-panel-fallback--tile .state-compact {
    align-items: center;
    width: 100%;
}

/* EntityStatePanel for SMOKE_DETECTOR entities.
 *
 * All rules nested under .hi-state-panel-smoke_detector so the short
 * scoped class names (.icon, .status-label, .badge, .hero, etc.)
 * don't leak. The panel root carries the SMOKE state's polling-
 * driven status attribute — its value is the decay-aware token
 * (``idle`` / ``active`` / ``recent`` / ``past``) at both initial
 * render and across polling refreshes, because the template seeds
 * it from ``smoke_data.svg_status_style.status_value`` and the
 * polling pipeline writes the same vocabulary. CSS keyed on the
 * single token suffices.
 */

:root {
    --hi-smoke-idle-color:   #059669;
    --hi-smoke-idle-bg:      rgba(5, 150, 105, 0.10);
    --hi-smoke-active-color: #dc2626;
    --hi-smoke-active-bg:    rgba(220, 38, 38, 0.15);
    --hi-smoke-recent-color: #d97706;
    --hi-smoke-recent-bg:    rgba(217, 119, 6, 0.12);
    --hi-smoke-past-color:   #a16207;
    --hi-smoke-past-bg:      rgba(161, 98, 7, 0.10);
}

/* ============================================================== */
/* Badge — circular icon hero, shared across contexts.            */
/* ============================================================== */

.hi-state-panel-smoke_detector .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.hi-state-panel-smoke_detector .icon {
    width: 60%;
    height: 60%;
}

/* ============================================================== */
/* Per-state visibility: icon + label variants                    */
/* ============================================================== */

.hi-state-panel-smoke_detector .icon,
.hi-state-panel-smoke_detector .status-label {
    display: none;
}
.hi-state-panel-smoke_detector[status="idle"]   .icon--idle,
.hi-state-panel-smoke_detector[status="idle"]   .status-label--idle,
.hi-state-panel-smoke_detector[status="active"] .icon--active,
.hi-state-panel-smoke_detector[status="active"] .status-label--active,
.hi-state-panel-smoke_detector[status="recent"] .icon--recent,
.hi-state-panel-smoke_detector[status="recent"] .status-label--recent,
.hi-state-panel-smoke_detector[status="past"]   .icon--past,
.hi-state-panel-smoke_detector[status="past"]   .status-label--past {
    display: block;
}

/* ============================================================== */
/* Per-state color tints                                          */
/* ============================================================== */

.hi-state-panel-smoke_detector[status="idle"]   .badge { background: var(--hi-smoke-idle-bg);   color: var(--hi-smoke-idle-color); }
.hi-state-panel-smoke_detector[status="active"] .badge { background: var(--hi-smoke-active-bg); color: var(--hi-smoke-active-color); }
.hi-state-panel-smoke_detector[status="recent"] .badge { background: var(--hi-smoke-recent-bg); color: var(--hi-smoke-recent-color); }
.hi-state-panel-smoke_detector[status="past"]   .badge { background: var(--hi-smoke-past-bg);   color: var(--hi-smoke-past-color); }

.hi-state-panel-smoke_detector .status-label { font-weight: 600; }
.hi-state-panel-smoke_detector[status="idle"]   .status-label { color: var(--hi-smoke-idle-color); }
.hi-state-panel-smoke_detector[status="active"] .status-label { color: var(--hi-smoke-active-color); }
.hi-state-panel-smoke_detector[status="recent"] .status-label { color: var(--hi-smoke-recent-color); }
.hi-state-panel-smoke_detector[status="past"]   .status-label { color: var(--hi-smoke-past-color); }

/* ============================================================== */
/* "Triggered X ago" detail line (recent / past only).            */
/* ============================================================== */
/* Visibility matches the status-label variants: hidden by default */
/* and shown only when the panel root's decay-aware ``status``     */
/* attribute is ``recent`` or ``past``. Idle and active suppress   */
/* — idle has nothing to say, active is "now."                     */

.hi-state-panel-smoke_detector .last-event {
    display: none;
    color: var(--text-muted, #6c757d);
}
.hi-state-panel-smoke_detector[status="recent"] .last-event,
.hi-state-panel-smoke_detector[status="past"]   .last-event {
    display: block;
}

/* Alarm-state pulse to draw attention. */
.hi-state-panel-smoke_detector[status="active"] .icon--active {
    animation: hi-smoke-alarm-pulse 1.2s ease-in-out infinite;
}
@keyframes hi-smoke-alarm-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.85; }
}

/* ============================================================== */
/* Modal layout                                                   */
/* ============================================================== */

.hi-state-panel-smoke_detector--modal .hero {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.hi-state-panel-smoke_detector--modal .badge { width: 120px; height: 120px; }
.hi-state-panel-smoke_detector--modal .status-label {
    font-size: 22px;
    line-height: 1.1;
}
.hi-state-panel-smoke_detector--modal .last-event {
    font-size: 13px;
    line-height: 1.2;
}
.hi-state-panel-smoke_detector--modal .auxiliary {
    border-top: 1px solid var(--line-color, #d0d7de);
    padding: 14px 20px;
    display: flex;
    justify-content: space-around;
}
.hi-state-panel-smoke_detector--modal .aux-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.hi-state-panel-smoke_detector--modal .aux-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6c757d);
    font-weight: 600;
}
.hi-state-panel-smoke_detector--modal .aux-value { font-size: 14px; font-weight: 500; }

/* ============================================================== */
/* Row card layout: badge + name + status + last-event + aux all     */
/* on one horizontal line.                                            */
/* ============================================================== */

.hi-state-panel-smoke_detector--row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    min-height: var(--hi-panel-row-min-height);
}
.hi-state-panel-smoke_detector--row .badge { width: 44px; height: 44px; flex-shrink: 0; }
.hi-state-panel-smoke_detector--row .entity-name {
    font-size: 14px; font-weight: 600; line-height: 1.2;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hi-state-panel-smoke_detector--row .status-label {
    font-size: 13px;
    flex-shrink: 0;
}
/* margin-left: auto on both last-event and aux-bits pushes the      */
/* right-most group to the right edge. Whichever of the two appears  */
/* first consumes the available free space; the other sits flush     */
/* next to it. Works for all combinations (either present, both      */
/* present, neither present).                                         */
.hi-state-panel-smoke_detector--row .last-event {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted, #6c757d);
    flex-shrink: 0;
    margin-left: auto;
}
.hi-state-panel-smoke_detector--row .aux-bits {
    font-size: 11px;
    color: var(--text-muted, #6c757d);
    flex-shrink: 0;
    margin-left: auto;
}

/* ============================================================== */
/* Grid card layout                                               */
/* ============================================================== */

.hi-state-panel-smoke_detector--tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px;
    gap: 6px;
    height: 100%;
}
.hi-state-panel-smoke_detector--tile .badge { width: 72px; height: 72px; margin-top: 6px; }
.hi-state-panel-smoke_detector--tile .status-label { font-size: 13px; line-height: 1.1; }
.hi-state-panel-smoke_detector--tile .entity-name {
    font-size: 10px;
    color: var(--text-muted, #6c757d);
    line-height: 1.2;
    margin-top: 4px;
}
.hi-state-panel-smoke_detector--tile[status="idle"],
.hi-state-panel-smoke_detector--row[status="idle"]   { background: var(--hi-smoke-idle-bg); }
.hi-state-panel-smoke_detector--tile[status="active"],
.hi-state-panel-smoke_detector--row[status="active"] { background: var(--hi-smoke-active-bg); }
.hi-state-panel-smoke_detector--tile[status="recent"],
.hi-state-panel-smoke_detector--row[status="recent"] { background: var(--hi-smoke-recent-bg); }
.hi-state-panel-smoke_detector--tile[status="past"],
.hi-state-panel-smoke_detector--row[status="past"]   { background: var(--hi-smoke-past-bg); }

/* ============================================================== */
/* Battery low-state escalation.                                  */
/* ============================================================== */
/* The polling pipeline emits ``status="low"`` on BATTERY_LEVEL    */
/* elements when the value is below the framework threshold        */
/* (see EntityStateDisplayData.BATTERY_LOW_THRESHOLD_PCT). The     */
/* aux-value text colors red; the grid card surfaces a dedicated   */
/* "Low Battery" warning only in the low state.                    */

.hi-state-panel-smoke_detector--modal .aux-value[status="low"] {
    color: var(--hi-smoke-active-color);
    font-weight: 600;
}
.hi-state-panel-smoke_detector--row .aux-bits span[status="low"] {
    color: var(--hi-smoke-active-color);
    font-weight: 600;
}

.hi-state-panel-smoke_detector--tile .low-battery-warning {
    display: none;
    margin-top: 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hi-smoke-active-color);
}
.hi-state-panel-smoke_detector--tile .low-battery-warning[status="low"] {
    display: block;
}

/* EntityStatePanel for CAMERA entities.
 *
 * All rules nested under .hi-state-panel-camera. The panel composes
 * existing video-stream and state-status partials; this CSS supplies
 * the per-context layout (modal / list / grid) around them.
 */

:root {
    --hi-camera-offline-color: #6b7280;
    --hi-camera-offline-bg: #2c2c2c;
}

.hi-state-panel-camera .stream {
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
}

.hi-state-panel-camera .stream-unavailable {
    background: var(--hi-camera-offline-bg);
    color: var(--hi-camera-offline-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 60px;
}

/* The live-view wrapper renders an anchor that wraps a
 * .video-container around the <img>. Both intermediate elements
 * must carry height:100% so the <img>'s height:100% / object-fit
 * resolves against the .stream box's aspect-ratio rather than the
 * image's intrinsic height (which would otherwise overflow the
 * 16:9 area and get bottom-clipped by overflow:hidden). */
.hi-state-panel-camera .stream a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}
.hi-state-panel-camera .stream .video-container {
    width: 100%;
    height: 100%;
    /* Override the main video pane's 400px collapse-guard — panels  */
    /* size their stream box from their own context (tile cell or    */
    /* modal stream rule below), not from the container itself.      */
    min-height: 0;
}
.hi-state-panel-camera .stream .video-container img,
.hi-state-panel-camera .stream img.img-fluid {
    width: 100%;
    height: 100%;
    /* ``contain`` rather than ``cover``: integrations produce
     * arbitrary aspect ratios, and silently cropping pixels from
     * the user's camera feed is the wrong default. Grid/list cards
     * keep their fixed aspect-ratio cell for layout consistency;
     * the image is letterboxed inside. */
    object-fit: contain;
    display: block;
}

/* ============================================================== */
/* Modal layout                                                   */
/* ============================================================== */

/* Modal shows one camera at a time, so the box sizes to the image's
 * natural aspect ratio — no cropping, no letterboxing. Grid/list
 * contexts (below) keep their fixed aspect-ratio cell for layout
 * consistency across cameras; ``object-fit: contain`` inherited from
 * the base rule keeps each image whole inside its cell. */
.hi-state-panel-camera--modal .stream {
    margin-bottom: 16px;
    /* Collapse-guard for the EntityStatus modal: the image is        */
    /* ``height: auto`` here, so a hung stream with no natural        */
    /* dimensions would otherwise drop the box to 0. Sized smaller    */
    /* than the main video pane's 400px since the modal frames a     */
    /* single camera in a tighter chrome.                             */
    min-height: 200px;
}
.hi-state-panel-camera--modal .stream .video-container img,
.hi-state-panel-camera--modal .stream img.img-fluid {
    height: auto;
}

/* ============================================================== */
/* List card layout                                               */
/* ============================================================== */

/* ROW context: status-only horizontal strip — no live feed embed.    */
/* A small snapshot thumbnail (when available) replaces the stream    */
/* for visual identification; falls back to the entity icon when no   */
/* snapshot exists.                                                    */

.hi-state-panel-camera--row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    min-height: var(--hi-panel-row-min-height);
}
.hi-state-panel-camera--row .row-thumb {
    flex-shrink: 0;
    width: 80px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 3px;
    overflow: hidden;
}
.hi-state-panel-camera--row .row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hi-state-panel-camera--row .row-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}
.hi-state-panel-camera--row .row-icon svg {
    width: 100%;
    height: 100%;
}
.hi-state-panel-camera--row .entity-name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 14px; font-weight: 600; line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hi-state-panel-camera--row .last-event {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted, #6c757d);
    flex-shrink: 0;
    margin-left: auto;
}

/* ============================================================== */
/* Grid card layout — video fills, name overlay along the bottom. */
/* ============================================================== */

.hi-state-panel-camera--tile {
    position: relative;
    width: 100%;
    height: 100%;
}
.hi-state-panel-camera--tile .stream {
    width: 100%;
    height: 100%;
}
.hi-state-panel-camera--tile .tile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 8px 6px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
    color: white;
}
.hi-state-panel-camera--tile .entity-name {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

/* ============================================================== */
/* Motion chip — small status indicator overlaid on the stream    */
/* corner when the camera entity carries a MOVEMENT role. Uses    */
/* the framework's decay-aware status tokens so the chip color    */
/* matches the rest of the app's motion treatment.                */
/* ============================================================== */

.hi-state-panel-camera .stream {
    position: relative;
}
.hi-state-panel-camera .motion-chip {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: var(--status-idle-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.hi-state-panel-camera .motion-chip svg {
    width: 65%;
    height: 65%;
}
.hi-state-panel-camera .motion-chip[status="active"] {
    background: var(--status-active-color);
    color: var(--on-status-active-color);
    animation: hi-camera-motion-pulse 1.2s ease-in-out infinite;
}
.hi-state-panel-camera .motion-chip[status="recent"] {
    background: var(--status-recent-color);
    color: var(--on-status-recent-color);
}
.hi-state-panel-camera .motion-chip[status="past"] {
    background: var(--status-past-color);
    color: var(--on-status-past-color);
}

@keyframes hi-camera-motion-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.12); opacity: 0.9; }
}

/* Smaller chip in compact contexts. */
.hi-state-panel-camera--row .motion-chip,
.hi-state-panel-camera--tile .motion-chip {
    width: 24px;
    height: 24px;
    top: 4px;
    right: 4px;
}

/* In ROW context the chip flows inline (no stream to overlay) — */
/* drop the absolute positioning and the box-shadow.             */
.hi-state-panel-camera--row .motion-chip {
    position: static;
    flex-shrink: 0;
    box-shadow: none;
    top: auto;
    right: auto;
}

/* EntityStatePanel for THERMOSTAT entities.
 *
 * All rules nested under .hi-state-panel-thermostat. The dial's
 * SVG markers (setpoint, current temperature) are positioned by
 * thermostat.js because their angle depends on the numeric
 * magnitude of the temperature values — CSS can't compute that.
 * Color tint and the HVAC-action text label are CSS-driven from
 * the ``status`` attribute the polling system maintains on the
 * panel root (which carries the HVAC_ACTION state's CSS class).
 */

:root {
    --hi-thermo-idle-color: #6c757d;
    --hi-thermo-heating-color: #d9430d;
    --hi-thermo-heating-bg: rgba(244, 95, 54, 0.10);
    --hi-thermo-cooling-color: #1a73c2;
    --hi-thermo-cooling-bg: rgba(45, 130, 220, 0.10);
}

/* ============================================================== */
/* Dial — shared across modal and list contexts.                  */
/* ============================================================== */

.hi-state-panel-thermostat .dial {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.03);
    transition: background-color 0.4s ease;
    flex-shrink: 0;
}
.hi-state-panel-thermostat[status="heating"] .dial { background: var(--hi-thermo-heating-bg); }
.hi-state-panel-thermostat[status="cooling"] .dial { background: var(--hi-thermo-cooling-bg); }

.hi-state-panel-thermostat .dial-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hi-state-panel-thermostat .dial-track {
    stroke: rgba(0, 0, 0, 0.10);
}

.hi-state-panel-thermostat .dial-setpoint-marker line {
    stroke: var(--hi-thermo-idle-color);
}
.hi-state-panel-thermostat[status="heating"] .dial-setpoint-marker line { stroke: var(--hi-thermo-heating-color); }
.hi-state-panel-thermostat[status="cooling"] .dial-setpoint-marker line { stroke: var(--hi-thermo-cooling-color); }

.hi-state-panel-thermostat .dial-current-marker circle {
    fill: var(--hi-thermo-idle-color);
}
.hi-state-panel-thermostat[status="heating"] .dial-current-marker circle { fill: var(--hi-thermo-heating-color); }
.hi-state-panel-thermostat[status="cooling"] .dial-current-marker circle { fill: var(--hi-thermo-cooling-color); }

.hi-state-panel-thermostat .dial-center {
    text-align: center;
    z-index: 1;
}
.hi-state-panel-thermostat .dial-temp {
    font-weight: 300;
    line-height: 1;
    display: block;
    color: #1f2328;
}

/* HVAC-action label: only the variant matching the current status renders. */
.hi-state-panel-thermostat .dial-mode-label { display: none; }
.hi-state-panel-thermostat[status="idle"]    .dial-mode-label[for-status="idle"],
.hi-state-panel-thermostat[status="heating"] .dial-mode-label[for-status="heating"],
.hi-state-panel-thermostat[status="cooling"] .dial-mode-label[for-status="cooling"],
.hi-state-panel-thermostat[status="off"]     .dial-mode-label[for-status="off"] {
    display: inline;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.hi-state-panel-thermostat[status="idle"]    .dial-mode-label { color: var(--hi-thermo-idle-color); }
.hi-state-panel-thermostat[status="heating"] .dial-mode-label { color: var(--hi-thermo-heating-color); }
.hi-state-panel-thermostat[status="cooling"] .dial-mode-label { color: var(--hi-thermo-cooling-color); }
.hi-state-panel-thermostat[status="off"]     .dial-mode-label { color: var(--hi-thermo-idle-color); }

/* ============================================================== */
/* Modal layout                                                   */
/* ============================================================== */

.hi-state-panel-thermostat--modal {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hi-state-panel-thermostat--modal .dial {
    width: 220px;
    height: 220px;
    margin-bottom: 16px;
}
.hi-state-panel-thermostat--modal .dial-temp { font-size: 56px; }
.hi-state-panel-thermostat--modal .dial-mode-label { margin-top: 6px; }

.hi-state-panel-thermostat--modal .thermostat-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-top: 4px;
}
.hi-state-panel-thermostat--modal .thermostat-setpoint-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.hi-state-panel-thermostat--modal .thermostat-modes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}
.hi-state-panel-thermostat--modal .control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hi-state-panel-thermostat--modal .control-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6c757d);
    font-weight: 600;
}
.hi-state-panel-thermostat--modal .control-readonly {
    font-size: 14px;
    color: #1f2328;
    padding: 6px 0;
}

/* Setpoint stepper widget. */
.hi-state-panel-thermostat .setpoint-stepper-form {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.hi-state-panel-thermostat .setpoint-stepper {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.hi-state-panel-thermostat .stepper-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-color, #d0d7de);
    background: white;
    color: var(--primary-color, #177072);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.hi-state-panel-thermostat .stepper-btn:hover { background: var(--info-bg-light, #e8f4f4); }
.hi-state-panel-thermostat .stepper-btn:disabled {
    color: var(--text-muted, #6c757d);
    cursor: not-allowed;
    opacity: 0.55;
}
.hi-state-panel-thermostat .setpoint-value {
    font-size: 20px;
    font-weight: 500;
    min-width: 56px;
    text-align: center;
}
.hi-state-panel-thermostat .setpoint-value--readonly {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}

.hi-state-panel-thermostat--modal .thermostat-secondary {
    width: 100%;
    border-top: 1px solid var(--line-color, #d0d7de);
    padding-top: 12px;
    margin-top: 16px;
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted, #6c757d);
}
.hi-state-panel-thermostat--modal .secondary-label { color: var(--text-muted, #6c757d); }
.hi-state-panel-thermostat--modal .secondary-value {
    color: #1f2328;
    font-weight: 500;
    margin-left: 4px;
}

/* ============================================================== */
/* List card layout                                               */
/* ============================================================== */

.hi-state-panel-thermostat--row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    min-height: var(--hi-panel-row-min-height);
}
.hi-state-panel-thermostat--row .row-identity {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}
.hi-state-panel-thermostat--row .entity-name {
    font-size: 14px; font-weight: 600; line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hi-state-panel-thermostat--row .row-mode-status {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hi-state-panel-thermostat--row .row-current {
    flex: 0 0 auto;
}
.hi-state-panel-thermostat--row .row-current-temp {
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
}
.hi-state-panel-thermostat--row[status="heating"] .row-current-temp {
    color: var(--hi-thermo-heating-color);
}
.hi-state-panel-thermostat--row[status="cooling"] .row-current-temp {
    color: var(--hi-thermo-cooling-color);
}
.hi-state-panel-thermostat--row .row-setpoints {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    gap: 16px;
}
.hi-state-panel-thermostat--row .setpoint-block--dual {
    gap: 16px;
}
.hi-state-panel-thermostat--row .row-control {
    flex: 0 1 auto;
}
.hi-state-panel-thermostat--row .row-control select {
    font-size: 12px;
    padding: 4px 6px;
    max-width: 110px;
}

/* Progressive disclosure as the row narrows: hide the right-most,
 * lower-priority controllers first. Mode select disappears before the
 * mode-status label (which still conveys the mode visually). Below
 * the last breakpoint, the absolute minimum (name + current + setpoint)
 * remains. Container queries scope to the actual content width (set on
 * .collection-row-list in main.css), independent of sidebar width.
 */
@container collection-row (max-width: 1100px) {
    .hi-state-panel-thermostat--row .row-control--preset { display: none; }
}
@container collection-row (max-width: 900px) {
    .hi-state-panel-thermostat--row .row-control--fan { display: none; }
}
@container collection-row (max-width: 700px) {
    .hi-state-panel-thermostat--row .row-control--mode { display: none; }
}
@container collection-row (max-width: 500px) {
    .hi-state-panel-thermostat--row .row-mode-status { display: none; }
}

/* ============================================================== */
/* Grid card layout — flat number, color-tinted background.       */
/* ============================================================== */

.hi-state-panel-thermostat--tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    height: 100%;
}
.hi-state-panel-thermostat--tile[status="heating"],
.hi-state-panel-thermostat--row[status="heating"] { background: var(--hi-thermo-heating-bg); }
.hi-state-panel-thermostat--tile[status="cooling"],
.hi-state-panel-thermostat--row[status="cooling"] { background: var(--hi-thermo-cooling-bg); }
.hi-state-panel-thermostat--tile .tile-temp {
    font-size: 44px;
    font-weight: 300;
    line-height: 1;
}
.hi-state-panel-thermostat--tile .entity-name {
    font-size: 11px; color: var(--text-muted, #6c757d);
    margin-top: 6px; line-height: 1.2;
}
.hi-state-panel-thermostat--tile .setpoint-line {
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #6c757d);
    margin-top: 3px;
    font-weight: 600;
}
.hi-state-panel-thermostat--tile[status="heating"] .setpoint-line { color: var(--hi-thermo-heating-color); }
.hi-state-panel-thermostat--tile[status="cooling"] .setpoint-line { color: var(--hi-thermo-cooling-color); }

/* ============================================================== */
/* Setpoint visibility (dual vs single).                          */
/* ============================================================== */
/* Driven by the live HVAC mode value. thermostat.js keeps        */
/* ``data-hvac-mode`` on the panel root in sync with the polled   */
/* HVAC_MODE state. Default (mode absent or any non-dual mode):   */
/* hide dual markers / blocks / summaries. heat_cool / auto: show */
/* dual, hide single. Placed at end-of-file so the cascade wins   */
/* against earlier .control-group / .setpoint-summary layout      */
/* rules at equal specificity.                                    */

.hi-state-panel-thermostat .dial-setpoint-marker--dual,
.hi-state-panel-thermostat .setpoint-block--dual,
.hi-state-panel-thermostat .setpoint-summary--dual {
    display: none;
}
.hi-state-panel-thermostat[data-hvac-mode="heat_cool"] .dial-setpoint-marker--dual,
.hi-state-panel-thermostat[data-hvac-mode="auto"]      .dial-setpoint-marker--dual {
    display: initial;
}
.hi-state-panel-thermostat[data-hvac-mode="heat_cool"] .setpoint-block--dual,
.hi-state-panel-thermostat[data-hvac-mode="auto"]      .setpoint-block--dual {
    display: flex;
}
.hi-state-panel-thermostat[data-hvac-mode="heat_cool"] .setpoint-summary--dual,
.hi-state-panel-thermostat[data-hvac-mode="auto"]      .setpoint-summary--dual {
    display: inline;
}
.hi-state-panel-thermostat[data-hvac-mode="heat_cool"] .dial-setpoint-marker--single,
.hi-state-panel-thermostat[data-hvac-mode="auto"]      .dial-setpoint-marker--single,
.hi-state-panel-thermostat[data-hvac-mode="heat_cool"] .setpoint-block--single,
.hi-state-panel-thermostat[data-hvac-mode="auto"]      .setpoint-block--single,
.hi-state-panel-thermostat[data-hvac-mode="heat_cool"] .setpoint-summary--single,
.hi-state-panel-thermostat[data-hvac-mode="auto"]      .setpoint-summary--single {
    display: none;
}