@charset "UTF-8";
@import "../app/global/__vars.css";
:root {
  --brand-dark: #54389b;
  --brand-light: #ebe5fb;
  --brand-neutral: #f4f0ff;
  --brand-header: #54389b;
  --brand-header-controls: #ebe5fb;
  --brand-sidebar: #ededeb;
  --brand-sidebar-open: #f1f1ee;
  --brand-sidebar-selected: #f4f0ff;
  --brand-sidebar-hover: rgba($brand-sidebar, 0.12);
  --brand-selected: $brand-selected;
}

/*@mixin dubrand($brandvar) {
    .HKDM {
        $brand-dark: #d4121d;
        $brand-light: #ebe7e7;
        var(--brand-neutral): #f9dadc;
        $brand-header: #d4121d;
        $brand-header-controls: #ebe7e7;
        $brand-sidebar-selected: #f9dadc;
    }
}



@include dubrand(HKDM);
*/
.app {
  /*&.LUDU {
      --brand-dark: #005aa8;
      --brand-light: #ecf6f9;
      --brand-neutral: #f9fdff;
      --brand-header: #005aa8;
      --brand-header-controls: #ecf6f9;
      --brand-sidebar-selected: #f9fdff;
      --brand-selected: #d6eafb;
  }*/
}
.app.DEFAULT {
  --brand-dark: #005aa8;
  --brand-light: #ecf6f9;
  --brand-neutral: #f9fdff;
  --brand-header: #005aa8;
  --brand-header-controls: #ecf6f9;
  --brand-sidebar-selected: #f9fdff;
  --brand-selected: #d6eafb;
}
.app.HKDM {
  --brand-dark: #d4121d;
  --brand-light: #ebe7e7;
  --brand-neutral: #f9dadc;
  --brand-header: #d4121d;
  --brand-header-controls: #ebe7e7;
  --brand-sidebar-selected: #f9dadc;
  --brand-selected: #f9dadc;
}
.app.HUMAN {
  --brand-dark: #54389b;
  --brand-light: #ebe5fb;
  --brand-neutral: #f4f0ff;
  --brand-header: #54389b;
  --brand-header-controls: #ebe5fb;
  --brand-sidebar-selected: #f4f0ff;
  --brand-selected: #d6eafb;
}
.app.GDCKZG, .app.HORIZONT, .app.LUDU {
  --brand-dark: #5f99ca;
  --brand-light: #ecf6f9;
  --brand-neutral: #f9fdff;
  --brand-header: #5f99ca;
  --brand-header-controls: #ecf6f9;
  --brand-sidebar-selected: #f9fdff;
  --brand-selected: #d6eafb;
}

@font-face {
  font-family: "horizont";
  font-stretch: normal;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../assets/webfonts/horizont-light-webfont.eot");
  src: url("../assets/webfonts/horizont-light-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/webfonts/horizont-light-webfont.woff2") format("woff2"), url("../assets/webfonts/horizont-light-webfont.woff") format("woff"), url("../assets/webfonts/horizont-light-webfont.ttf") format("truetype"), url("../assets/webfonts/horizont-light-webfont.svg#horizontlight") format("svg");
}
@font-face {
  font-family: "horizont";
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/webfonts/horizont-regular-webfont.eot");
  src: url("../assets/webfonts/horizont-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/webfonts/horizont-regular-webfont.woff2") format("woff2"), url("../assets/webfonts/horizont-regular-webfont.woff") format("woff"), url("../assets/webfonts/horizont-regular-webfont.ttf") format("truetype"), url("../assets/webfonts/horizont-regular-webfont.svg#horizontregular") format("svg");
}
@font-face {
  font-family: "horizont";
  font-stretch: normal;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/webfonts/horizont-medium-webfont.eot");
  src: url("../assets/webfonts/horizont-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/webfonts/horizont-medium-webfont.woff2") format("woff2"), url("../assets/webfonts/horizont-medium-webfont.woff") format("woff"), url("../assets/webfonts/horizont-medium-webfont.ttf") format("truetype"), url("../assets/webfonts/horizont-medium-webfont.svg#horizontmedium") format("svg");
}
@font-face {
  font-family: "horizont";
  font-stretch: normal;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/webfonts/horizont-bold-webfont.eot");
  src: url("../assets/webfonts/horizont-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/webfonts/horizont-bold-webfont.woff2") format("woff2"), url("../assets/webfonts/horizont-bold-webfont.woff") format("woff"), url("../assets/webfonts/horizont-bold-webfont.ttf") format("truetype"), url("../assets/webfonts/horizont-bold-webfont.svg#horizontbold") format("svg");
}
@font-face {
  font-family: "horizont";
  font-stretch: normal;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/webfonts/horizont-extrabold-webfont.eot");
  src: url("../assets/webfonts/horizont-extrabold-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/webfonts/horizont-extrabold-webfont.woff2") format("woff2"), url("../assets/webfonts/horizont-extrabold-webfont.woff") format("woff"), url("../assets/webfonts/horizont-extrabold-webfont.ttf") format("truetype"), url("../assets/webfonts/horizont-extrabold-webfont.svg#horizontextrabold") format("svg");
}
@font-face {
  font-family: "Fira Sans";
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/FiraSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Fira Sans";
  font-stretch: normal;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/FiraSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Fira Sans";
  font-stretch: normal;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/FiraSans-Bold.ttf") format("truetype");
}
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-brand-light: #ebe5fb;
  --bs-brand-dark: #54389b;
  --bs-brand-neutral: #f4f0ff;
  --bs-success: #84D12B;
  --bs-info: #38A5FF;
  --bs-warning: #FFAE00;
  --bs-danger: #FF5538;
  --bs-light: #E6E8EB;
  --bs-dark: #4B4C4D;
  --bs-white: #fff;
  --bs-black: #000;
  --bs-brand-light-rgb: 235, 229, 251;
  --bs-brand-dark-rgb: 84, 56, 155;
  --bs-brand-neutral-rgb: 244, 240, 255;
  --bs-success-rgb: 132, 209, 43;
  --bs-info-rgb: 56, 165, 255;
  --bs-warning-rgb: 255, 174, 0;
  --bs-danger-rgb: 255, 85, 56;
  --bs-light-rgb: 230, 232, 235;
  --bs-dark-rgb: 75, 76, 77;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 112, 113, 115;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: Fira Sans, Helvetica, Arial, Liberation Sans, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #707173;
  --bs-body-bg: #fff;
}

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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

hr:not([size]) {
  height: 1px;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.23;
  color: #2D2D2E;
}

h1, .h1 {
  font-size: calc(1.474rem + 2.6282666667vw);
}
@media (min-width: 1500px) {
  h1, .h1 {
    font-size: 3.938rem;
  }
}

h2, .h2 {
  font-size: calc(1.4270833333rem + 2.0777777778vw);
}
@media (min-width: 1500px) {
  h2, .h2 {
    font-size: 3.375rem;
  }
}

h3, .h3 {
  font-size: calc(1.38025rem + 1.5282666667vw);
}
@media (min-width: 1500px) {
  h3, .h3 {
    font-size: 2.813rem;
  }
}

h4, .h4 {
  font-size: calc(1.3333333333rem + 0.9777777778vw);
}
@media (min-width: 1500px) {
  h4, .h4 {
    font-size: 2.25rem;
  }
}

h5, .h5 {
  font-size: calc(1.2865rem + 0.4282666667vw);
}
@media (min-width: 1500px) {
  h5, .h5 {
    font-size: 1.688rem;
  }
}

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

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

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

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

ol,
ul {
  padding-left: 2rem;
}

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: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: #54389b;
  text-decoration: none;
}
a:hover {
  color: rgb(139.4962085308, 114.0308056872, 204.0691943128);
  text-decoration: none;
}

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

pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
  direction: ltr /* rtl:ignore */;
  unicode-bidi: bidi-override;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: #d63384;
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  color: #fff;
  background-color: #212529;
  border-radius: 3px;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
  font-weight: 700;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

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

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

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

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,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]::-webkit-calendar-picker-indicator {
  display: none;
}

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;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

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

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.2708333333rem + 0.2444444444vw);
  line-height: inherit;
}
@media (min-width: 1500px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

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

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
}

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

output {
  display: inline-block;
}

iframe {
  border: 0;
}

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

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

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

.display-1 {
  font-size: calc(1.5625rem + 3.6666666667vw);
  font-weight: 300;
  line-height: 1.23;
}
@media (min-width: 1500px) {
  .display-1 {
    font-size: 5rem;
  }
}

.display-2 {
  font-size: calc(1.5208333333rem + 3.1777777778vw);
  font-weight: 300;
  line-height: 1.23;
}
@media (min-width: 1500px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-size: calc(1.4791666667rem + 2.6888888889vw);
  font-weight: 300;
  line-height: 1.23;
}
@media (min-width: 1500px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-size: calc(1.4375rem + 2.2vw);
  font-weight: 300;
  line-height: 1.23;
}
@media (min-width: 1500px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-size: calc(1.3958333333rem + 1.7111111111vw);
  font-weight: 300;
  line-height: 1.23;
}
@media (min-width: 1500px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-size: calc(1.3541666667rem + 1.2222222222vw);
  font-weight: 300;
  line-height: 1.23;
}
@media (min-width: 1500px) {
  .display-6 {
    font-size: 2.5rem;
  }
}

.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: 0.875em;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}
.blockquote-footer::before {
  content: "— ";
}

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

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

.figure {
  display: inline-block;
}

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

.figure-caption {
  font-size: 0.875em;
  color: #6c757d;
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container-smx {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 400px) {
  .container-smx, .container {
    max-width: 427px;
  }
}
@media (min-width: 576px) {
  .container-sm, .container-smx, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container-smx, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container-smx, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container-smx, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1500px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container-smx, .container {
    max-width: 1440px;
  }
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

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

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

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

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

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

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

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

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

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

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

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

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

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

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

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

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

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

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

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

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

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

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

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

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

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 400px) {
  .col-smx {
    flex: 1 0 0%;
  }
  .row-cols-smx-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-smx-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-smx-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-smx-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-smx-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-smx-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-smx-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-smx-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-smx-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-smx-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-smx-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-smx-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-smx-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-smx-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-smx-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-smx-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-smx-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-smx-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-smx-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-smx-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-smx-0 {
    margin-left: 0;
  }
  .offset-smx-1 {
    margin-left: 8.33333333%;
  }
  .offset-smx-2 {
    margin-left: 16.66666667%;
  }
  .offset-smx-3 {
    margin-left: 25%;
  }
  .offset-smx-4 {
    margin-left: 33.33333333%;
  }
  .offset-smx-5 {
    margin-left: 41.66666667%;
  }
  .offset-smx-6 {
    margin-left: 50%;
  }
  .offset-smx-7 {
    margin-left: 58.33333333%;
  }
  .offset-smx-8 {
    margin-left: 66.66666667%;
  }
  .offset-smx-9 {
    margin-left: 75%;
  }
  .offset-smx-10 {
    margin-left: 83.33333333%;
  }
  .offset-smx-11 {
    margin-left: 91.66666667%;
  }
  .g-smx-0,
  .gx-smx-0 {
    --bs-gutter-x: 0;
  }
  .g-smx-0,
  .gy-smx-0 {
    --bs-gutter-y: 0;
  }
  .g-smx-1,
  .gx-smx-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-smx-1,
  .gy-smx-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-smx-2,
  .gx-smx-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-smx-2,
  .gy-smx-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-smx-3,
  .gx-smx-3 {
    --bs-gutter-x: 1rem;
  }
  .g-smx-3,
  .gy-smx-3 {
    --bs-gutter-y: 1rem;
  }
  .g-smx-4,
  .gx-smx-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-smx-4,
  .gy-smx-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-smx-5,
  .gx-smx-5 {
    --bs-gutter-x: 3rem;
  }
  .g-smx-5,
  .gy-smx-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1500px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #707173;
  --bs-table-striped-bg: #F7F6F2;
  --bs-table-active-color: #707173;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #707173;
  --bs-table-hover-bg: #EDEDEB;
  width: 100%;
  margin-bottom: 1rem;
  color: #707173;
  vertical-align: middle;
  border-color: #CACCCF;
}
.table > :not(caption) > * > * {
  padding: 0.75rem 0.75rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table > :not(:first-child) {
  border-top: 2px solid currentColor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

.table-active {
  --bs-table-accent-bg: var(--bs-table-active-bg);
  color: var(--bs-table-active-color);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

.table-primary {
  --bs-table-bg: rgb(251, 249.8, 254.2);
  --bs-table-striped-bg: rgb(238.45, 237.31, 241.49);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(225.9, 224.82, 228.78);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(232.175, 231.065, 235.135);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgb(225.9, 224.82, 228.78);
}

.table-secondary {
  --bs-table-bg: rgb(220.8, 215.2, 235);
  --bs-table-striped-bg: rgb(209.76, 204.44, 223.25);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(198.72, 193.68, 211.5);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(204.24, 199.06, 217.375);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgb(198.72, 193.68, 211.5);
}

.table-success {
  --bs-table-bg: rgb(230.4, 245.8, 212.6);
  --bs-table-striped-bg: rgb(218.88, 233.51, 201.97);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(207.36, 221.22, 191.34);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(213.12, 227.365, 196.655);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgb(207.36, 221.22, 191.34);
}

.table-info {
  --bs-table-bg: rgb(215.2, 237, 255);
  --bs-table-striped-bg: rgb(204.44, 225.15, 242.25);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(193.68, 213.3, 229.5);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(199.06, 219.225, 235.875);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgb(193.68, 213.3, 229.5);
}

.table-warning {
  --bs-table-bg: rgb(255, 238.8, 204);
  --bs-table-striped-bg: rgb(242.25, 226.86, 193.8);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(229.5, 214.92, 183.6);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(235.875, 220.89, 188.7);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgb(229.5, 214.92, 183.6);
}

.table-danger {
  --bs-table-bg: rgb(255, 221, 215.2);
  --bs-table-striped-bg: rgb(242.25, 209.95, 204.44);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(229.5, 198.9, 193.68);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(235.875, 204.425, 199.06);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgb(229.5, 198.9, 193.68);
}

.table-light {
  --bs-table-bg: #E6E8EB;
  --bs-table-striped-bg: rgb(218.5, 220.4, 223.25);
  --bs-table-striped-color: #000;
  --bs-table-active-bg: rgb(207, 208.8, 211.5);
  --bs-table-active-color: #000;
  --bs-table-hover-bg: rgb(212.75, 214.6, 217.375);
  --bs-table-hover-color: #000;
  color: #000;
  border-color: rgb(207, 208.8, 211.5);
}

.table-dark {
  --bs-table-bg: #4B4C4D;
  --bs-table-striped-bg: rgb(84, 84.95, 85.9);
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: rgb(93, 93.9, 94.8);
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: rgb(88.5, 89.425, 90.35);
  --bs-table-hover-color: #fff;
  color: #fff;
  border-color: rgb(93, 93.9, 94.8);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 399.98px) {
  .table-responsive-smx {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1499.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.form-label {
  margin-bottom: 0.5rem;
}

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

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

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

.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #707173;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.313rem 1rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.444;
  color: #707173;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #CACCCF;
  appearance: none;
  border-radius: 3px;
  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[type=file] {
  overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control:focus {
  color: #707173;
  background-color: #fff;
  border-color: rgb(169.5, 155.5, 205);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}
.form-control::-webkit-date-and-time-value {
  height: 1.444em;
}
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #F2F4F7;
  border-color: #CACCCF;
  opacity: 1;
}
.form-control::file-selector-button {
  padding: 0.313rem 1rem;
  margin: -0.313rem -1rem;
  margin-inline-end: 1rem;
  color: #707173;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  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) {
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: rgb(221.35, 224.2, 227.05);
}
.form-control::-webkit-file-upload-button {
  padding: 0.313rem 1rem;
  margin: -0.313rem -1rem;
  margin-inline-end: 1rem;
  color: #707173;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  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) {
  .form-control::-webkit-file-upload-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: rgb(221.35, 224.2, 227.05);
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.313rem 0;
  margin-bottom: 0;
  line-height: 1.444;
  color: #707173;
  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 {
  min-height: calc(1.444em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 3px;
}
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  margin-inline-end: 0.5rem;
}
.form-control-sm::-webkit-file-upload-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  margin-inline-end: 0.5rem;
}

.form-control-lg {
  min-height: calc(1.444em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 12px;
}
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  margin-inline-end: 1rem;
}
.form-control-lg::-webkit-file-upload-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  margin-inline-end: 1rem;
}

textarea.form-control {
  min-height: calc(1.444em + 0.626rem + 2px);
}
textarea.form-control-sm {
  min-height: calc(1.444em + 0.5rem + 2px);
}
textarea.form-control-lg {
  min-height: calc(1.444em + 1rem + 2px);
}

.form-control-color {
  width: 3rem;
  height: auto;
  padding: 0.313rem;
}
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control-color::-moz-color-swatch {
  height: 1.444em;
  border-radius: 3px;
}
.form-control-color::-webkit-color-swatch {
  height: 1.444em;
  border-radius: 3px;
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.313rem 3rem 0.313rem 1rem;
  -moz-padding-start: calc(1rem - 3px);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.444;
  color: #707173;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath  fill='%239E9FA1' d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  border: 1px solid #CACCCF;
  border-radius: 3px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
.form-select:focus {
  border-color: rgb(169.5, 155.5, 205);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  padding-right: 1rem;
  background-image: none;
}
.form-select:disabled {
  background-color: #F2F4F7;
  border-color: #CACCCF;
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #707173;
}

.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: 3px;
}

.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
  border-radius: 12px;
}

.form-check {
  display: block;
  min-height: 1.688rem;
  padding-left: 2.188rem;
  margin-bottom: 0;
}
.form-check .form-check-input {
  float: left;
  margin-left: -2.188rem;
}

.form-check-input {
  width: 1.688rem;
  height: 1.688rem;
  margin-top: -0.094rem;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  appearance: none;
  color-adjust: exact;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: rgb(169.5, 155.5, 205);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}
.form-check-input:checked {
  background-color: #54389b;
  border-color: #54389b;
}
.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #54389b;
  border-color: #54389b;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  opacity: 0.5;
}

.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28169.5, 155.5, 205%29'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 0.45;
}

.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  appearance: none;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #54389b;
  border: 0;
  border-radius: 1rem;
  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) {
  .form-range::-webkit-slider-thumb {
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: rgb(203.7, 195.3, 225);
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #54389b;
  border: 0;
  border-radius: 1rem;
  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) {
  .form-range::-moz-range-thumb {
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: rgb(203.7, 195.3, 225);
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}
.form-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 1rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
.form-floating > .form-control {
  padding: 1rem 1rem;
}
.form-floating > .form-control::placeholder {
  color: transparent;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 3;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.313rem 1rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.444;
  color: #707173;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #CACCCF;
  border-radius: 3px;
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 12px;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 3px;
}

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

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

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

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #000;
  background-color: rgba(132, 209, 43, 0.9);
  border-radius: 3px;
}

.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: #84D12B;
  padding-right: calc(1.444em + 0.626rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2384D12B' 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.361em + 0.1565rem) center;
  background-size: calc(0.722em + 0.313rem) calc(0.722em + 0.313rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: #84D12B;
  box-shadow: 0 0 0 0.25rem rgba(132, 209, 43, 0.25);
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.444em + 0.626rem);
  background-position: top calc(0.361em + 0.1565rem) right calc(0.361em + 0.1565rem);
}

.was-validated .form-select:valid, .form-select.is-valid {
  border-color: #84D12B;
}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  padding-right: 5.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath  fill='%239E9FA1' d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2384D12B' 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-position: right 1rem center, center right 3rem;
  background-size: 18px, calc(0.722em + 0.313rem) calc(0.722em + 0.313rem);
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
  border-color: #84D12B;
  box-shadow: 0 0 0 0.25rem rgba(132, 209, 43, 0.25);
}

.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: #84D12B;
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: #84D12B;
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(132, 209, 43, 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: #84D12B;
}

.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid,
.was-validated .input-group .form-select:valid,
.input-group .form-select.is-valid {
  z-index: 1;
}
.was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus,
.was-validated .input-group .form-select:valid:focus,
.input-group .form-select.is-valid:focus {
  z-index: 3;
}

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

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #000;
  background-color: rgba(255, 85, 56, 0.9);
  border-radius: 3px;
}

.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: #FF5538;
  padding-right: calc(1.444em + 0.626rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23FF5538'%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='%23FF5538' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.361em + 0.1565rem) center;
  background-size: calc(0.722em + 0.313rem) calc(0.722em + 0.313rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #FF5538;
  box-shadow: 0 0 0 0.25rem rgba(255, 85, 56, 0.25);
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.444em + 0.626rem);
  background-position: top calc(0.361em + 0.1565rem) right calc(0.361em + 0.1565rem);
}

.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: #FF5538;
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  padding-right: 5.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath  fill='%239E9FA1' d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23FF5538'%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='%23FF5538' stroke='none'/%3e%3c/svg%3e");
  background-position: right 1rem center, center right 3rem;
  background-size: 18px, calc(0.722em + 0.313rem) calc(0.722em + 0.313rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
  border-color: #FF5538;
  box-shadow: 0 0 0 0.25rem rgba(255, 85, 56, 0.25);
}

.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: #FF5538;
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: #FF5538;
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 85, 56, 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #FF5538;
}

.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid,
.was-validated .input-group .form-select:invalid,
.input-group .form-select.is-invalid {
  z-index: 2;
}
.was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus,
.was-validated .input-group .form-select:invalid:focus,
.input-group .form-select.is-invalid:focus {
  z-index: 3;
}

.btn {
  display: inline-block;
  font-weight: 800;
  line-height: 1.444;
  color: #707173;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.313rem 1rem;
  font-size: 1.125rem;
  border-radius: 3px;
  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: #707173;
}
.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  pointer-events: none;
  opacity: 0.45;
}

.btn-brand-light {
  color: #000;
  background-color: #ebe5fb;
  border-color: #ebe5fb;
}
.btn-brand-light:hover {
  color: #000;
  background-color: rgb(239.2, 234.46, 251.84);
  border-color: rgb(239.2, 234.46, 251.84);
}
.btn-check:focus + .btn-brand-light, .btn-brand-light:focus {
  color: #000;
  background-color: rgb(239.2, 234.46, 251.84);
  border-color: rgb(239.2, 234.46, 251.84);
  box-shadow: 0 0 0 0.25rem rgba(199.75, 194.65, 213.35, 0.5);
}
.btn-check:checked + .btn-brand-light, .btn-check:active + .btn-brand-light, .btn-brand-light:active, .btn-brand-light.active, .show > .btn-brand-light.dropdown-toggle {
  color: #000;
  background-color: rgb(240.4, 236.02, 252.08);
  border-color: rgb(237, 231.6, 251.4);
}
.btn-check:checked + .btn-brand-light:focus, .btn-check:active + .btn-brand-light:focus, .btn-brand-light:active:focus, .btn-brand-light.active:focus, .show > .btn-brand-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(199.75, 194.65, 213.35, 0.5);
}
.btn-brand-light:disabled, .btn-brand-light.disabled {
  color: #000;
  background-color: #ebe5fb;
  border-color: #ebe5fb;
}

.btn-brand-dark {
  color: #fff;
  background-color: #54389b;
  border-color: #54389b;
}
.btn-brand-dark:hover {
  color: #fff;
  background-color: rgb(66.36, 44.24, 122.45);
  border-color: rgb(66.36, 44.24, 122.45);
}
.btn-check:focus + .btn-brand-dark, .btn-brand-dark:focus {
  color: #fff;
  background-color: rgb(66.36, 44.24, 122.45);
  border-color: rgb(66.36, 44.24, 122.45);
  box-shadow: 0 0 0 0.25rem rgba(109.65, 85.85, 170, 0.5);
}
.btn-check:checked + .btn-brand-dark, .btn-check:active + .btn-brand-dark, .btn-brand-dark:active, .btn-brand-dark.active, .show > .btn-brand-dark.dropdown-toggle {
  color: #fff;
  background-color: rgb(61.32, 40.88, 113.15);
  border-color: rgb(63, 42, 116.25);
}
.btn-check:checked + .btn-brand-dark:focus, .btn-check:active + .btn-brand-dark:focus, .btn-brand-dark:active:focus, .btn-brand-dark.active:focus, .show > .btn-brand-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(109.65, 85.85, 170, 0.5);
}
.btn-brand-dark:disabled, .btn-brand-dark.disabled {
  color: #fff;
  background-color: #54389b;
  border-color: #54389b;
}

.btn-brand-neutral {
  color: #000;
  background-color: #f4f0ff;
  border-color: #f4f0ff;
}
.btn-brand-neutral:hover {
  color: #000;
  background-color: rgb(246.31, 243.15, 255);
  border-color: rgb(246.31, 243.15, 255);
}
.btn-check:focus + .btn-brand-neutral, .btn-brand-neutral:focus {
  color: #000;
  background-color: rgb(246.31, 243.15, 255);
  border-color: rgb(246.31, 243.15, 255);
  box-shadow: 0 0 0 0.25rem rgba(207.4, 204, 216.75, 0.5);
}
.btn-check:checked + .btn-brand-neutral, .btn-check:active + .btn-brand-neutral, .btn-brand-neutral:active, .btn-brand-neutral.active, .show > .btn-brand-neutral.dropdown-toggle {
  color: #000;
  background-color: rgb(246.97, 244.05, 255);
  border-color: rgb(245.1, 241.5, 255);
}
.btn-check:checked + .btn-brand-neutral:focus, .btn-check:active + .btn-brand-neutral:focus, .btn-brand-neutral:active:focus, .btn-brand-neutral.active:focus, .show > .btn-brand-neutral.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(207.4, 204, 216.75, 0.5);
}
.btn-brand-neutral:disabled, .btn-brand-neutral.disabled {
  color: #000;
  background-color: #f4f0ff;
  border-color: #f4f0ff;
}

.btn-success {
  color: #000;
  background-color: #84D12B;
  border-color: #84D12B;
}
.btn-success:hover {
  color: #000;
  background-color: rgb(157.83, 218.66, 87.52);
  border-color: rgb(157.83, 218.66, 87.52);
}
.btn-check:focus + .btn-success, .btn-success:focus {
  color: #000;
  background-color: rgb(157.83, 218.66, 87.52);
  border-color: rgb(157.83, 218.66, 87.52);
  box-shadow: 0 0 0 0.25rem rgba(112.2, 177.65, 36.55, 0.5);
}
.btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {
  color: #000;
  background-color: rgb(165.21, 221.42, 100.24);
  border-color: rgb(144.3, 213.6, 64.2);
}
.btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(112.2, 177.65, 36.55, 0.5);
}
.btn-success:disabled, .btn-success.disabled {
  color: #000;
  background-color: #84D12B;
  border-color: #84D12B;
}

.btn-info {
  color: #000;
  background-color: #38A5FF;
  border-color: #38A5FF;
}
.btn-info:hover {
  color: #000;
  background-color: rgb(97.79, 183.9, 255);
  border-color: rgb(97.79, 183.9, 255);
}
.btn-check:focus + .btn-info, .btn-info:focus {
  color: #000;
  background-color: rgb(97.79, 183.9, 255);
  border-color: rgb(97.79, 183.9, 255);
  box-shadow: 0 0 0 0.25rem rgba(47.6, 140.25, 216.75, 0.5);
}
.btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
  color: #000;
  background-color: rgb(109.73, 189.3, 255);
  border-color: rgb(75.9, 174, 255);
}
.btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(47.6, 140.25, 216.75, 0.5);
}
.btn-info:disabled, .btn-info.disabled {
  color: #000;
  background-color: #38A5FF;
  border-color: #38A5FF;
}

.btn-warning {
  color: #000;
  background-color: #FFAE00;
  border-color: #FFAE00;
}
.btn-warning:hover {
  color: #000;
  background-color: rgb(255, 191.01, 53.55);
  border-color: rgb(255, 191.01, 53.55);
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
  color: #000;
  background-color: rgb(255, 191.01, 53.55);
  border-color: rgb(255, 191.01, 53.55);
  box-shadow: 0 0 0 0.25rem rgba(216.75, 147.9, 0, 0.5);
}
.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
  color: #000;
  background-color: rgb(255, 195.87, 68.85);
  border-color: rgb(255, 182.1, 25.5);
}
.btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(216.75, 147.9, 0, 0.5);
}
.btn-warning:disabled, .btn-warning.disabled {
  color: #000;
  background-color: #FFAE00;
  border-color: #FFAE00;
}

.btn-danger {
  color: #000;
  background-color: #FF5538;
  border-color: #FF5538;
}
.btn-danger:hover {
  color: #000;
  background-color: rgb(255, 120.7, 97.79);
  border-color: rgb(255, 120.7, 97.79);
}
.btn-check:focus + .btn-danger, .btn-danger:focus {
  color: #000;
  background-color: rgb(255, 120.7, 97.79);
  border-color: rgb(255, 120.7, 97.79);
  box-shadow: 0 0 0 0.25rem rgba(216.75, 72.25, 47.6, 0.5);
}
.btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
  color: #000;
  background-color: rgb(255, 130.9, 109.73);
  border-color: rgb(255, 102, 75.9);
}
.btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(216.75, 72.25, 47.6, 0.5);
}
.btn-danger:disabled, .btn-danger.disabled {
  color: #000;
  background-color: #FF5538;
  border-color: #FF5538;
}

.btn-light {
  color: #000;
  background-color: #E6E8EB;
  border-color: #E6E8EB;
}
.btn-light:hover {
  color: #000;
  background-color: rgb(235.25, 236.83, 239.2);
  border-color: rgb(235.25, 236.83, 239.2);
}
.btn-check:focus + .btn-light, .btn-light:focus {
  color: #000;
  background-color: rgb(235.25, 236.83, 239.2);
  border-color: rgb(235.25, 236.83, 239.2);
  box-shadow: 0 0 0 0.25rem rgba(195.5, 197.2, 199.75, 0.5);
}
.btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
  color: #000;
  background-color: rgb(236.75, 238.21, 240.4);
  border-color: rgb(232.5, 234.3, 237);
}
.btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(195.5, 197.2, 199.75, 0.5);
}
.btn-light:disabled, .btn-light.disabled {
  color: #000;
  background-color: #E6E8EB;
  border-color: #E6E8EB;
}

.btn-dark {
  color: #fff;
  background-color: #4B4C4D;
  border-color: #4B4C4D;
}
.btn-dark:hover {
  color: #fff;
  background-color: rgb(59.25, 60.04, 60.83);
  border-color: rgb(59.25, 60.04, 60.83);
}
.btn-check:focus + .btn-dark, .btn-dark:focus {
  color: #fff;
  background-color: rgb(59.25, 60.04, 60.83);
  border-color: rgb(59.25, 60.04, 60.83);
  box-shadow: 0 0 0 0.25rem rgba(102, 102.85, 103.7, 0.5);
}
.btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: rgb(54.75, 55.48, 56.21);
  border-color: rgb(56.25, 57, 57.75);
}
.btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(102, 102.85, 103.7, 0.5);
}
.btn-dark:disabled, .btn-dark.disabled {
  color: #fff;
  background-color: #4B4C4D;
  border-color: #4B4C4D;
}

.btn-white {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}
.btn-white:hover {
  color: #000;
  background-color: white;
  border-color: white;
}
.btn-check:focus + .btn-white, .btn-white:focus {
  color: #000;
  background-color: white;
  border-color: white;
  box-shadow: 0 0 0 0.25rem rgba(216.75, 216.75, 216.75, 0.5);
}
.btn-check:checked + .btn-white, .btn-check:active + .btn-white, .btn-white:active, .btn-white.active, .show > .btn-white.dropdown-toggle {
  color: #000;
  background-color: white;
  border-color: white;
}
.btn-check:checked + .btn-white:focus, .btn-check:active + .btn-white:focus, .btn-white:active:focus, .btn-white.active:focus, .show > .btn-white.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(216.75, 216.75, 216.75, 0.5);
}
.btn-white:disabled, .btn-white.disabled {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}

.btn-black {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-black:hover {
  color: #fff;
  background-color: black;
  border-color: black;
}
.btn-check:focus + .btn-black, .btn-black:focus {
  color: #fff;
  background-color: black;
  border-color: black;
  box-shadow: 0 0 0 0.25rem rgba(38.25, 38.25, 38.25, 0.5);
}
.btn-check:checked + .btn-black, .btn-check:active + .btn-black, .btn-black:active, .btn-black.active, .show > .btn-black.dropdown-toggle {
  color: #fff;
  background-color: black;
  border-color: black;
}
.btn-check:checked + .btn-black:focus, .btn-check:active + .btn-black:focus, .btn-black:active:focus, .btn-black.active:focus, .show > .btn-black.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(38.25, 38.25, 38.25, 0.5);
}
.btn-black:disabled, .btn-black.disabled {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.btn-outline-brand-light {
  color: #ebe5fb;
  border-color: #ebe5fb;
}
.btn-outline-brand-light:hover {
  color: #000;
  background-color: #ebe5fb;
  border-color: #ebe5fb;
}
.btn-check:focus + .btn-outline-brand-light, .btn-outline-brand-light:focus {
  box-shadow: 0 0 0 0.25rem rgba(235, 229, 251, 0.5);
}
.btn-check:checked + .btn-outline-brand-light, .btn-check:active + .btn-outline-brand-light, .btn-outline-brand-light:active, .btn-outline-brand-light.active, .btn-outline-brand-light.dropdown-toggle.show {
  color: #000;
  background-color: #ebe5fb;
  border-color: #ebe5fb;
}
.btn-check:checked + .btn-outline-brand-light:focus, .btn-check:active + .btn-outline-brand-light:focus, .btn-outline-brand-light:active:focus, .btn-outline-brand-light.active:focus, .btn-outline-brand-light.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(235, 229, 251, 0.5);
}
.btn-outline-brand-light:disabled, .btn-outline-brand-light.disabled {
  color: #ebe5fb;
  background-color: transparent;
}

.btn-outline-brand-dark {
  color: #54389b;
  border-color: #54389b;
}
.btn-outline-brand-dark:hover {
  color: #fff;
  background-color: #54389b;
  border-color: #54389b;
}
.btn-check:focus + .btn-outline-brand-dark, .btn-outline-brand-dark:focus {
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.5);
}
.btn-check:checked + .btn-outline-brand-dark, .btn-check:active + .btn-outline-brand-dark, .btn-outline-brand-dark:active, .btn-outline-brand-dark.active, .btn-outline-brand-dark.dropdown-toggle.show {
  color: #fff;
  background-color: #54389b;
  border-color: #54389b;
}
.btn-check:checked + .btn-outline-brand-dark:focus, .btn-check:active + .btn-outline-brand-dark:focus, .btn-outline-brand-dark:active:focus, .btn-outline-brand-dark.active:focus, .btn-outline-brand-dark.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.5);
}
.btn-outline-brand-dark:disabled, .btn-outline-brand-dark.disabled {
  color: #54389b;
  background-color: transparent;
}

.btn-outline-brand-neutral {
  color: #f4f0ff;
  border-color: #f4f0ff;
}
.btn-outline-brand-neutral:hover {
  color: #000;
  background-color: #f4f0ff;
  border-color: #f4f0ff;
}
.btn-check:focus + .btn-outline-brand-neutral, .btn-outline-brand-neutral:focus {
  box-shadow: 0 0 0 0.25rem rgba(244, 240, 255, 0.5);
}
.btn-check:checked + .btn-outline-brand-neutral, .btn-check:active + .btn-outline-brand-neutral, .btn-outline-brand-neutral:active, .btn-outline-brand-neutral.active, .btn-outline-brand-neutral.dropdown-toggle.show {
  color: #000;
  background-color: #f4f0ff;
  border-color: #f4f0ff;
}
.btn-check:checked + .btn-outline-brand-neutral:focus, .btn-check:active + .btn-outline-brand-neutral:focus, .btn-outline-brand-neutral:active:focus, .btn-outline-brand-neutral.active:focus, .btn-outline-brand-neutral.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(244, 240, 255, 0.5);
}
.btn-outline-brand-neutral:disabled, .btn-outline-brand-neutral.disabled {
  color: #f4f0ff;
  background-color: transparent;
}

.btn-outline-success {
  color: #84D12B;
  border-color: #84D12B;
}
.btn-outline-success:hover {
  color: #000;
  background-color: #84D12B;
  border-color: #84D12B;
}
.btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
  box-shadow: 0 0 0 0.25rem rgba(132, 209, 43, 0.5);
}
.btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
  color: #000;
  background-color: #84D12B;
  border-color: #84D12B;
}
.btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(132, 209, 43, 0.5);
}
.btn-outline-success:disabled, .btn-outline-success.disabled {
  color: #84D12B;
  background-color: transparent;
}

.btn-outline-info {
  color: #38A5FF;
  border-color: #38A5FF;
}
.btn-outline-info:hover {
  color: #000;
  background-color: #38A5FF;
  border-color: #38A5FF;
}
.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
  box-shadow: 0 0 0 0.25rem rgba(56, 165, 255, 0.5);
}
.btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
  color: #000;
  background-color: #38A5FF;
  border-color: #38A5FF;
}
.btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(56, 165, 255, 0.5);
}
.btn-outline-info:disabled, .btn-outline-info.disabled {
  color: #38A5FF;
  background-color: transparent;
}

.btn-outline-warning {
  color: #FFAE00;
  border-color: #FFAE00;
}
.btn-outline-warning:hover {
  color: #000;
  background-color: #FFAE00;
  border-color: #FFAE00;
}
.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 174, 0, 0.5);
}
.btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
  color: #000;
  background-color: #FFAE00;
  border-color: #FFAE00;
}
.btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 174, 0, 0.5);
}
.btn-outline-warning:disabled, .btn-outline-warning.disabled {
  color: #FFAE00;
  background-color: transparent;
}

.btn-outline-danger {
  color: #FF5538;
  border-color: #FF5538;
}
.btn-outline-danger:hover {
  color: #000;
  background-color: #FF5538;
  border-color: #FF5538;
}
.btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 85, 56, 0.5);
}
.btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
  color: #000;
  background-color: #FF5538;
  border-color: #FF5538;
}
.btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 85, 56, 0.5);
}
.btn-outline-danger:disabled, .btn-outline-danger.disabled {
  color: #FF5538;
  background-color: transparent;
}

.btn-outline-light {
  color: #E6E8EB;
  border-color: #E6E8EB;
}
.btn-outline-light:hover {
  color: #000;
  background-color: #E6E8EB;
  border-color: #E6E8EB;
}
.btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
  box-shadow: 0 0 0 0.25rem rgba(230, 232, 235, 0.5);
}
.btn-check:checked + .btn-outline-light, .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show {
  color: #000;
  background-color: #E6E8EB;
  border-color: #E6E8EB;
}
.btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(230, 232, 235, 0.5);
}
.btn-outline-light:disabled, .btn-outline-light.disabled {
  color: #E6E8EB;
  background-color: transparent;
}

.btn-outline-dark {
  color: #4B4C4D;
  border-color: #4B4C4D;
}
.btn-outline-dark:hover {
  color: #fff;
  background-color: #4B4C4D;
  border-color: #4B4C4D;
}
.btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
  box-shadow: 0 0 0 0.25rem rgba(75, 76, 77, 0.5);
}
.btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show {
  color: #fff;
  background-color: #4B4C4D;
  border-color: #4B4C4D;
}
.btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(75, 76, 77, 0.5);
}
.btn-outline-dark:disabled, .btn-outline-dark.disabled {
  color: #4B4C4D;
  background-color: transparent;
}

.btn-outline-white {
  color: #fff;
  border-color: #fff;
}
.btn-outline-white:hover {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}
.btn-check:focus + .btn-outline-white, .btn-outline-white:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}
.btn-check:checked + .btn-outline-white, .btn-check:active + .btn-outline-white, .btn-outline-white:active, .btn-outline-white.active, .btn-outline-white.dropdown-toggle.show {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}
.btn-check:checked + .btn-outline-white:focus, .btn-check:active + .btn-outline-white:focus, .btn-outline-white:active:focus, .btn-outline-white.active:focus, .btn-outline-white.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}
.btn-outline-white:disabled, .btn-outline-white.disabled {
  color: #fff;
  background-color: transparent;
}

.btn-outline-black {
  color: #000;
  border-color: #000;
}
.btn-outline-black:hover {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-check:focus + .btn-outline-black, .btn-outline-black:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);
}
.btn-check:checked + .btn-outline-black, .btn-check:active + .btn-outline-black, .btn-outline-black:active, .btn-outline-black.active, .btn-outline-black.dropdown-toggle.show {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-check:checked + .btn-outline-black:focus, .btn-check:active + .btn-outline-black:focus, .btn-outline-black:active:focus, .btn-outline-black.active:focus, .btn-outline-black.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);
}
.btn-outline-black:disabled, .btn-outline-black.disabled {
  color: #000;
  background-color: transparent;
}

.btn-link {
  font-weight: 400;
  color: #54389b;
  text-decoration: none;
}
.btn-link:hover {
  color: rgb(139.4962085308, 114.0308056872, 204.0691943128);
  text-decoration: none;
}
.btn-link:focus {
  text-decoration: none;
}
.btn-link:disabled, .btn-link.disabled {
  color: #6c757d;
}

.btn-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 12px;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 3px;
}

.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 {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}

.dropup,
.dropend,
.dropdown,
.dropstart {
  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;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0 0;
  margin: 0;
  font-size: 1rem;
  color: #707173;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: 0.125rem;
}

.dropdown-menu-start {
  --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
  right: auto;
  left: 0;
}

.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}

@media (min-width: 400px) {
  .dropdown-menu-smx-start {
    --bs-position: start;
  }
  .dropdown-menu-smx-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-smx-end {
    --bs-position: end;
  }
  .dropdown-menu-smx-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1500px) {
  .dropdown-menu-xxl-start {
    --bs-position: start;
  }
  .dropdown-menu-xxl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
  }
  .dropdown-menu-xxl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu[data-bs-popper] {
  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;
}

.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}
.dropend .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;
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}

.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
.dropstart .dropdown-toggle::after {
  display: none;
}
.dropstart .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;
}
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 18px 18px;
  clear: both;
  font-weight: 400;
  color: #707173;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-item:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.dropdown-item:last-child {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: rgb(100.8, 101.7, 103.5);
  background-color: #e9ecef;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #54389b;
}
.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 18px;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 18px 18px;
  color: #707173;
}

.dropdown-menu-dark {
  color: #dee2e6;
  background-color: #343a40;
  border-color: rgba(0, 0, 0, 0.15);
}
.dropdown-menu-dark .dropdown-item {
  color: #dee2e6;
}
.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
  color: #fff;
  background-color: #54389b;
}
.dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled {
  color: #adb5bd;
}
.dropdown-menu-dark .dropdown-divider {
  border-color: rgba(0, 0, 0, 0.15);
}
.dropdown-menu-dark .dropdown-item-text {
  color: #dee2e6;
}
.dropdown-menu-dark .dropdown-header {
  color: #adb5bd;
}

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

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #54389b;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: rgb(139.4962085308, 114.0308056872, 204.0691943128);
}
.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: none;
  border: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
  isolation: isolate;
}
.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: 3px;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #54389b;
}

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

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

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}

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

.card {
  position: relative;
  display: flex;
  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: 3px;
}
.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: 2px;
  border-top-right-radius: 2px;
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  padding: 1rem 1rem;
}

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

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

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

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

.card-header {
  padding: 0.5rem 1rem;
  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: 2px 2px 0 0;
}

.card-footer {
  padding: 0.5rem 1rem;
  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 2px 2px;
}

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

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

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  border-radius: 2px;
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

.card-group > .card {
  margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    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;
  }
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #707173;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  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, border-radius 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
.accordion-button:not(.collapsed) {
  color: rgb(211.5, 206.1, 225.9);
  background-color: rgb(237.9, 235.1, 245);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28211.5, 206.1, 225.9%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}
.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23707173'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  border-color: rgb(169.5, 155.5, 205);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-item {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
.accordion-item:first-of-type {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.accordion-body {
  padding: 1rem 1.25rem;
}

.accordion-flush .accordion-collapse {
  border-width: 0;
}
.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush .accordion-item .accordion-button {
  border-radius: 0;
}

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  color: #54389b;
  background-color: #fff;
  border: 1px solid #dee2e6;
  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) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: rgb(139.4962085308, 114.0308056872, 204.0691943128);
  background-color: #e9ecef;
  border-color: #dee2e6;
}
.page-link:focus {
  z-index: 3;
  color: rgb(139.4962085308, 114.0308056872, 204.0691943128);
  background-color: #e9ecef;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #54389b;
  border-color: #54389b;
}
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}

.page-link {
  padding: 0.375rem 0.75rem;
}

.page-item:first-child .page-link {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.page-item:last-child .page-link {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
}
.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}
.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

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

.alert-heading {
  color: inherit;
}

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

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.alert-brand-light {
  color: rgb(94, 91.6, 100.4);
  background-color: rgb(251, 249.8, 254.2);
  border-color: rgb(249, 247.2, 253.8);
}
.alert-brand-light .alert-link {
  color: rgb(75.2, 73.28, 80.32);
}

.alert-brand-dark {
  color: rgb(50.4, 33.6, 93);
  background-color: rgb(220.8, 215.2, 235);
  border-color: rgb(203.7, 195.3, 225);
}
.alert-brand-dark .alert-link {
  color: rgb(40.32, 26.88, 74.4);
}

.alert-brand-neutral {
  color: rgb(97.6, 96, 102);
  background-color: rgb(252.8, 252, 255);
  border-color: rgb(251.7, 250.5, 255);
}
.alert-brand-neutral .alert-link {
  color: rgb(78.08, 76.8, 81.6);
}

.alert-success {
  color: rgb(52.8, 83.6, 17.2);
  background-color: rgb(230.4, 245.8, 212.6);
  border-color: rgb(218.1, 241.2, 191.4);
}
.alert-success .alert-link {
  color: rgb(42.24, 66.88, 13.76);
}

.alert-info {
  color: rgb(33.6, 99, 153);
  background-color: rgb(215.2, 237, 255);
  border-color: rgb(195.3, 228, 255);
}
.alert-info .alert-link {
  color: rgb(26.88, 79.2, 122.4);
}

.alert-warning {
  color: rgb(102, 69.6, 0);
  background-color: rgb(255, 238.8, 204);
  border-color: rgb(255, 230.7, 178.5);
}
.alert-warning .alert-link {
  color: rgb(81.6, 55.68, 0);
}

.alert-danger {
  color: rgb(153, 51, 33.6);
  background-color: rgb(255, 221, 215.2);
  border-color: rgb(255, 204, 195.3);
}
.alert-danger .alert-link {
  color: rgb(122.4, 40.8, 26.88);
}

.alert-light {
  color: rgb(92, 92.8, 94);
  background-color: rgb(250, 250.4, 251);
  border-color: rgb(247.5, 248.1, 249);
}
.alert-light .alert-link {
  color: rgb(73.6, 74.24, 75.2);
}

.alert-dark {
  color: rgb(45, 45.6, 46.2);
  background-color: rgb(219, 219.2, 219.4);
  border-color: rgb(201, 201.3, 201.6);
}
.alert-dark .alert-link {
  color: rgb(36, 36.48, 36.96);
}

.alert-white {
  color: #666666;
  background-color: white;
  border-color: white;
}
.alert-white .alert-link {
  color: rgb(81.6, 81.6, 81.6);
}

.alert-black {
  color: black;
  background-color: #cccccc;
  border-color: rgb(178.5, 178.5, 178.5);
}
.alert-black .alert-link {
  color: black;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.link-brand-light {
  color: #ebe5fb;
}
.link-brand-light:hover, .link-brand-light:focus {
  color: rgb(239, 234.2, 251.8);
}

.link-brand-dark {
  color: #54389b;
}
.link-brand-dark:hover, .link-brand-dark:focus {
  color: rgb(67.2, 44.8, 124);
}

.link-brand-neutral {
  color: #f4f0ff;
}
.link-brand-neutral:hover, .link-brand-neutral:focus {
  color: rgb(246.2, 243, 255);
}

.link-success {
  color: #84D12B;
}
.link-success:hover, .link-success:focus {
  color: rgb(156.6, 218.2, 85.4);
}

.link-info {
  color: #38A5FF;
}
.link-info:hover, .link-info:focus {
  color: rgb(95.8, 183, 255);
}

.link-warning {
  color: #FFAE00;
}
.link-warning:hover, .link-warning:focus {
  color: rgb(255, 190.2, 51);
}

.link-danger {
  color: #FF5538;
}
.link-danger:hover, .link-danger:focus {
  color: rgb(255, 119, 95.8);
}

.link-light {
  color: #E6E8EB;
}
.link-light:hover, .link-light:focus {
  color: rgb(235, 236.6, 239);
}

.link-dark {
  color: #4B4C4D;
}
.link-dark:hover, .link-dark:focus {
  color: rgb(60, 60.8, 61.6);
}

.link-white {
  color: #fff;
}
.link-white:hover, .link-white:focus {
  color: white;
}

.link-black {
  color: #000;
}
.link-black:hover, .link-black:focus {
  color: black;
}

.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
  --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

.ratio-21x9 {
  --bs-aspect-ratio: 42.8571428571%;
}

.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;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}

@media (min-width: 400px) {
  .sticky-smx-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 576px) {
  .sticky-sm-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 1500px) {
  .sticky-xxl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

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

.vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentColor;
  opacity: 0.25;
}

.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;
}

.float-start {
  float: left !important;
}

.float-end {
  float: right !important;
}

.float-none {
  float: none !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-sm {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09), 0 3px 9px rgba(0, 0, 0, 0.18) !important;
}

.shadow-lg {
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.09), 0 6px 15px rgba(0, 0, 0, 0.18), 0 3px 9px rgba(0, 0, 0, 0.27), 0 1px 12px rgba(0, 0, 0, 0.36) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.top-0 {
  top: 0 !important;
}

.top-50 {
  top: 50% !important;
}

.top-100 {
  top: 100% !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.bottom-50 {
  bottom: 50% !important;
}

.bottom-100 {
  bottom: 100% !important;
}

.start-0 {
  left: 0 !important;
}

.start-50 {
  left: 50% !important;
}

.start-100 {
  left: 100% !important;
}

.end-0 {
  right: 0 !important;
}

.end-50 {
  right: 50% !important;
}

.end-100 {
  right: 100% !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  transform: translateY(-50%) !important;
}

.border {
  border: 1px solid #CACCCF !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: 1px solid #CACCCF !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-end {
  border-right: 1px solid #CACCCF !important;
}

.border-end-0 {
  border-right: 0 !important;
}

.border-bottom {
  border-bottom: 1px solid #CACCCF !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-start {
  border-left: 1px solid #CACCCF !important;
}

.border-start-0 {
  border-left: 0 !important;
}

.border-brand-light {
  border-color: #ebe5fb !important;
}

.border-brand-dark {
  border-color: #54389b !important;
}

.border-brand-neutral {
  border-color: #f4f0ff !important;
}

.border-success {
  border-color: #84D12B !important;
}

.border-info {
  border-color: #38A5FF !important;
}

.border-warning {
  border-color: #FFAE00 !important;
}

.border-danger {
  border-color: #FF5538 !important;
}

.border-light {
  border-color: #E6E8EB !important;
}

.border-dark {
  border-color: #4B4C4D !important;
}

.border-white {
  border-color: #fff !important;
}

.border-black {
  border-color: #000 !important;
}

.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !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;
}

.mw-100 {
  max-width: 100% !important;
}

.vw-100 {
  width: 100vw !important;
}

.min-vw-100 {
  min-width: 100vw !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;
}

.mh-100 {
  max-height: 100% !important;
}

.vh-100 {
  height: 100vh !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mx-n1 {
  margin-right: -0.25rem !important;
  margin-left: -0.25rem !important;
}

.mx-n2 {
  margin-right: -0.5rem !important;
  margin-left: -0.5rem !important;
}

.mx-n3 {
  margin-right: -1rem !important;
  margin-left: -1rem !important;
}

.mx-n4 {
  margin-right: -1.5rem !important;
  margin-left: -1.5rem !important;
}

.mx-n5 {
  margin-right: -3rem !important;
  margin-left: -3rem !important;
}

.my-n1 {
  margin-top: -0.25rem !important;
  margin-bottom: -0.25rem !important;
}

.my-n2 {
  margin-top: -0.5rem !important;
  margin-bottom: -0.5rem !important;
}

.my-n3 {
  margin-top: -1rem !important;
  margin-bottom: -1rem !important;
}

.my-n4 {
  margin-top: -1.5rem !important;
  margin-bottom: -1.5rem !important;
}

.my-n5 {
  margin-top: -3rem !important;
  margin-bottom: -3rem !important;
}

.mt-n1 {
  margin-top: -0.25rem !important;
}

.mt-n2 {
  margin-top: -0.5rem !important;
}

.mt-n3 {
  margin-top: -1rem !important;
}

.mt-n4 {
  margin-top: -1.5rem !important;
}

.mt-n5 {
  margin-top: -3rem !important;
}

.me-n1 {
  margin-right: -0.25rem !important;
}

.me-n2 {
  margin-right: -0.5rem !important;
}

.me-n3 {
  margin-right: -1rem !important;
}

.me-n4 {
  margin-right: -1.5rem !important;
}

.me-n5 {
  margin-right: -3rem !important;
}

.mb-n1 {
  margin-bottom: -0.25rem !important;
}

.mb-n2 {
  margin-bottom: -0.5rem !important;
}

.mb-n3 {
  margin-bottom: -1rem !important;
}

.mb-n4 {
  margin-bottom: -1.5rem !important;
}

.mb-n5 {
  margin-bottom: -3rem !important;
}

.ms-n1 {
  margin-left: -0.25rem !important;
}

.ms-n2 {
  margin-left: -0.5rem !important;
}

.ms-n3 {
  margin-left: -1rem !important;
}

.ms-n4 {
  margin-left: -1.5rem !important;
}

.ms-n5 {
  margin-left: -3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}

.fs-1 {
  font-size: calc(1.474rem + 2.6282666667vw) !important;
}

.fs-2 {
  font-size: calc(1.4270833333rem + 2.0777777778vw) !important;
}

.fs-3 {
  font-size: calc(1.38025rem + 1.5282666667vw) !important;
}

.fs-4 {
  font-size: calc(1.3333333333rem + 0.9777777778vw) !important;
}

.fs-5 {
  font-size: calc(1.2865rem + 0.4282666667vw) !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-bolder {
  font-weight: bolder !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.02 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 1.53 !important;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

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

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

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

.text-capitalize {
  text-transform: capitalize !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */
.text-brand-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-light-rgb), var(--bs-text-opacity)) !important;
}

.text-brand-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-dark-rgb), var(--bs-text-opacity)) !important;
}

.text-brand-neutral {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-brand-neutral-rgb), var(--bs-text-opacity)) !important;
}

.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}

.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
}

.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}

.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}

.text-body {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
}

.text-muted {
  --bs-text-opacity: 1;
  color: #707173 !important;
}

.text-black-50 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-reset {
  --bs-text-opacity: 1;
  color: inherit !important;
}

.text-opacity-25 {
  --bs-text-opacity: 0.25;
}

.text-opacity-50 {
  --bs-text-opacity: 0.5;
}

.text-opacity-75 {
  --bs-text-opacity: 0.75;
}

.text-opacity-100 {
  --bs-text-opacity: 1;
}

.bg-brand-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-brand-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-brand-neutral {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-brand-neutral-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-transparent {
  --bs-bg-opacity: 1;
  background-color: transparent !important;
}

.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
  --bs-bg-opacity: 1;
}

.bg-gradient {
  background-image: var(--bs-gradient) !important;
}

.user-select-all {
  user-select: all !important;
}

.user-select-auto {
  user-select: auto !important;
}

.user-select-none {
  user-select: none !important;
}

.pe-none {
  pointer-events: none !important;
}

.pe-auto {
  pointer-events: auto !important;
}

.rounded {
  border-radius: 3px !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: 3px !important;
}

.rounded-2 {
  border-radius: 3px !important;
}

.rounded-3 {
  border-radius: 12px !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-top {
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important;
}

.rounded-end {
  border-top-right-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
}

.rounded-bottom {
  border-bottom-right-radius: 3px !important;
  border-bottom-left-radius: 3px !important;
}

.rounded-start {
  border-bottom-left-radius: 3px !important;
  border-top-left-radius: 3px !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media (min-width: 400px) {
  .float-smx-start {
    float: left !important;
  }
  .float-smx-end {
    float: right !important;
  }
  .float-smx-none {
    float: none !important;
  }
  .d-smx-inline {
    display: inline !important;
  }
  .d-smx-inline-block {
    display: inline-block !important;
  }
  .d-smx-block {
    display: block !important;
  }
  .d-smx-grid {
    display: grid !important;
  }
  .d-smx-table {
    display: table !important;
  }
  .d-smx-table-row {
    display: table-row !important;
  }
  .d-smx-table-cell {
    display: table-cell !important;
  }
  .d-smx-flex {
    display: flex !important;
  }
  .d-smx-inline-flex {
    display: inline-flex !important;
  }
  .d-smx-none {
    display: none !important;
  }
  .flex-smx-fill {
    flex: 1 1 auto !important;
  }
  .flex-smx-row {
    flex-direction: row !important;
  }
  .flex-smx-column {
    flex-direction: column !important;
  }
  .flex-smx-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-smx-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-smx-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-smx-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-smx-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-smx-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-smx-wrap {
    flex-wrap: wrap !important;
  }
  .flex-smx-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-smx-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-smx-0 {
    gap: 0 !important;
  }
  .gap-smx-1 {
    gap: 0.25rem !important;
  }
  .gap-smx-2 {
    gap: 0.5rem !important;
  }
  .gap-smx-3 {
    gap: 1rem !important;
  }
  .gap-smx-4 {
    gap: 1.5rem !important;
  }
  .gap-smx-5 {
    gap: 3rem !important;
  }
  .justify-content-smx-start {
    justify-content: flex-start !important;
  }
  .justify-content-smx-end {
    justify-content: flex-end !important;
  }
  .justify-content-smx-center {
    justify-content: center !important;
  }
  .justify-content-smx-between {
    justify-content: space-between !important;
  }
  .justify-content-smx-around {
    justify-content: space-around !important;
  }
  .justify-content-smx-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-smx-start {
    align-items: flex-start !important;
  }
  .align-items-smx-end {
    align-items: flex-end !important;
  }
  .align-items-smx-center {
    align-items: center !important;
  }
  .align-items-smx-baseline {
    align-items: baseline !important;
  }
  .align-items-smx-stretch {
    align-items: stretch !important;
  }
  .align-content-smx-start {
    align-content: flex-start !important;
  }
  .align-content-smx-end {
    align-content: flex-end !important;
  }
  .align-content-smx-center {
    align-content: center !important;
  }
  .align-content-smx-between {
    align-content: space-between !important;
  }
  .align-content-smx-around {
    align-content: space-around !important;
  }
  .align-content-smx-stretch {
    align-content: stretch !important;
  }
  .align-self-smx-auto {
    align-self: auto !important;
  }
  .align-self-smx-start {
    align-self: flex-start !important;
  }
  .align-self-smx-end {
    align-self: flex-end !important;
  }
  .align-self-smx-center {
    align-self: center !important;
  }
  .align-self-smx-baseline {
    align-self: baseline !important;
  }
  .align-self-smx-stretch {
    align-self: stretch !important;
  }
  .order-smx-first {
    order: -1 !important;
  }
  .order-smx-0 {
    order: 0 !important;
  }
  .order-smx-1 {
    order: 1 !important;
  }
  .order-smx-2 {
    order: 2 !important;
  }
  .order-smx-3 {
    order: 3 !important;
  }
  .order-smx-4 {
    order: 4 !important;
  }
  .order-smx-5 {
    order: 5 !important;
  }
  .order-smx-last {
    order: 6 !important;
  }
  .m-smx-0 {
    margin: 0 !important;
  }
  .m-smx-1 {
    margin: 0.25rem !important;
  }
  .m-smx-2 {
    margin: 0.5rem !important;
  }
  .m-smx-3 {
    margin: 1rem !important;
  }
  .m-smx-4 {
    margin: 1.5rem !important;
  }
  .m-smx-5 {
    margin: 3rem !important;
  }
  .m-smx-auto {
    margin: auto !important;
  }
  .mx-smx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-smx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-smx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-smx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-smx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-smx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-smx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-smx-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-smx-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-smx-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-smx-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-smx-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-smx-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-smx-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-smx-0 {
    margin-top: 0 !important;
  }
  .mt-smx-1 {
    margin-top: 0.25rem !important;
  }
  .mt-smx-2 {
    margin-top: 0.5rem !important;
  }
  .mt-smx-3 {
    margin-top: 1rem !important;
  }
  .mt-smx-4 {
    margin-top: 1.5rem !important;
  }
  .mt-smx-5 {
    margin-top: 3rem !important;
  }
  .mt-smx-auto {
    margin-top: auto !important;
  }
  .me-smx-0 {
    margin-right: 0 !important;
  }
  .me-smx-1 {
    margin-right: 0.25rem !important;
  }
  .me-smx-2 {
    margin-right: 0.5rem !important;
  }
  .me-smx-3 {
    margin-right: 1rem !important;
  }
  .me-smx-4 {
    margin-right: 1.5rem !important;
  }
  .me-smx-5 {
    margin-right: 3rem !important;
  }
  .me-smx-auto {
    margin-right: auto !important;
  }
  .mb-smx-0 {
    margin-bottom: 0 !important;
  }
  .mb-smx-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-smx-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-smx-3 {
    margin-bottom: 1rem !important;
  }
  .mb-smx-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-smx-5 {
    margin-bottom: 3rem !important;
  }
  .mb-smx-auto {
    margin-bottom: auto !important;
  }
  .ms-smx-0 {
    margin-left: 0 !important;
  }
  .ms-smx-1 {
    margin-left: 0.25rem !important;
  }
  .ms-smx-2 {
    margin-left: 0.5rem !important;
  }
  .ms-smx-3 {
    margin-left: 1rem !important;
  }
  .ms-smx-4 {
    margin-left: 1.5rem !important;
  }
  .ms-smx-5 {
    margin-left: 3rem !important;
  }
  .ms-smx-auto {
    margin-left: auto !important;
  }
  .m-smx-n1 {
    margin: -0.25rem !important;
  }
  .m-smx-n2 {
    margin: -0.5rem !important;
  }
  .m-smx-n3 {
    margin: -1rem !important;
  }
  .m-smx-n4 {
    margin: -1.5rem !important;
  }
  .m-smx-n5 {
    margin: -3rem !important;
  }
  .mx-smx-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
  }
  .mx-smx-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important;
  }
  .mx-smx-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-smx-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important;
  }
  .mx-smx-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
  .my-smx-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important;
  }
  .my-smx-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important;
  }
  .my-smx-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important;
  }
  .my-smx-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important;
  }
  .my-smx-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important;
  }
  .mt-smx-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-smx-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-smx-n3 {
    margin-top: -1rem !important;
  }
  .mt-smx-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-smx-n5 {
    margin-top: -3rem !important;
  }
  .me-smx-n1 {
    margin-right: -0.25rem !important;
  }
  .me-smx-n2 {
    margin-right: -0.5rem !important;
  }
  .me-smx-n3 {
    margin-right: -1rem !important;
  }
  .me-smx-n4 {
    margin-right: -1.5rem !important;
  }
  .me-smx-n5 {
    margin-right: -3rem !important;
  }
  .mb-smx-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-smx-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-smx-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-smx-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-smx-n5 {
    margin-bottom: -3rem !important;
  }
  .ms-smx-n1 {
    margin-left: -0.25rem !important;
  }
  .ms-smx-n2 {
    margin-left: -0.5rem !important;
  }
  .ms-smx-n3 {
    margin-left: -1rem !important;
  }
  .ms-smx-n4 {
    margin-left: -1.5rem !important;
  }
  .ms-smx-n5 {
    margin-left: -3rem !important;
  }
  .p-smx-0 {
    padding: 0 !important;
  }
  .p-smx-1 {
    padding: 0.25rem !important;
  }
  .p-smx-2 {
    padding: 0.5rem !important;
  }
  .p-smx-3 {
    padding: 1rem !important;
  }
  .p-smx-4 {
    padding: 1.5rem !important;
  }
  .p-smx-5 {
    padding: 3rem !important;
  }
  .px-smx-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-smx-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-smx-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-smx-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-smx-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-smx-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-smx-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-smx-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-smx-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-smx-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-smx-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-smx-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-smx-0 {
    padding-top: 0 !important;
  }
  .pt-smx-1 {
    padding-top: 0.25rem !important;
  }
  .pt-smx-2 {
    padding-top: 0.5rem !important;
  }
  .pt-smx-3 {
    padding-top: 1rem !important;
  }
  .pt-smx-4 {
    padding-top: 1.5rem !important;
  }
  .pt-smx-5 {
    padding-top: 3rem !important;
  }
  .pe-smx-0 {
    padding-right: 0 !important;
  }
  .pe-smx-1 {
    padding-right: 0.25rem !important;
  }
  .pe-smx-2 {
    padding-right: 0.5rem !important;
  }
  .pe-smx-3 {
    padding-right: 1rem !important;
  }
  .pe-smx-4 {
    padding-right: 1.5rem !important;
  }
  .pe-smx-5 {
    padding-right: 3rem !important;
  }
  .pb-smx-0 {
    padding-bottom: 0 !important;
  }
  .pb-smx-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-smx-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-smx-3 {
    padding-bottom: 1rem !important;
  }
  .pb-smx-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-smx-5 {
    padding-bottom: 3rem !important;
  }
  .ps-smx-0 {
    padding-left: 0 !important;
  }
  .ps-smx-1 {
    padding-left: 0.25rem !important;
  }
  .ps-smx-2 {
    padding-left: 0.5rem !important;
  }
  .ps-smx-3 {
    padding-left: 1rem !important;
  }
  .ps-smx-4 {
    padding-left: 1.5rem !important;
  }
  .ps-smx-5 {
    padding-left: 3rem !important;
  }
  .text-smx-start {
    text-align: left !important;
  }
  .text-smx-end {
    text-align: right !important;
  }
  .text-smx-center {
    text-align: center !important;
  }
}
@media (min-width: 576px) {
  .float-sm-start {
    float: left !important;
  }
  .float-sm-end {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !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: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-sm-0 {
    gap: 0 !important;
  }
  .gap-sm-1 {
    gap: 0.25rem !important;
  }
  .gap-sm-2 {
    gap: 0.5rem !important;
  }
  .gap-sm-3 {
    gap: 1rem !important;
  }
  .gap-sm-4 {
    gap: 1.5rem !important;
  }
  .gap-sm-5 {
    gap: 3rem !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-baseline {
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    align-self: stretch !important;
  }
  .order-sm-first {
    order: -1 !important;
  }
  .order-sm-0 {
    order: 0 !important;
  }
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
  .m-sm-0 {
    margin: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-sm-0 {
    margin-top: 0 !important;
  }
  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mt-sm-3 {
    margin-top: 1rem !important;
  }
  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mt-sm-5 {
    margin-top: 3rem !important;
  }
  .mt-sm-auto {
    margin-top: auto !important;
  }
  .me-sm-0 {
    margin-right: 0 !important;
  }
  .me-sm-1 {
    margin-right: 0.25rem !important;
  }
  .me-sm-2 {
    margin-right: 0.5rem !important;
  }
  .me-sm-3 {
    margin-right: 1rem !important;
  }
  .me-sm-4 {
    margin-right: 1.5rem !important;
  }
  .me-sm-5 {
    margin-right: 3rem !important;
  }
  .me-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }
  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }
  .mb-sm-auto {
    margin-bottom: auto !important;
  }
  .ms-sm-0 {
    margin-left: 0 !important;
  }
  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }
  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }
  .ms-sm-3 {
    margin-left: 1rem !important;
  }
  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }
  .ms-sm-5 {
    margin-left: 3rem !important;
  }
  .ms-sm-auto {
    margin-left: auto !important;
  }
  .m-sm-n1 {
    margin: -0.25rem !important;
  }
  .m-sm-n2 {
    margin: -0.5rem !important;
  }
  .m-sm-n3 {
    margin: -1rem !important;
  }
  .m-sm-n4 {
    margin: -1.5rem !important;
  }
  .m-sm-n5 {
    margin: -3rem !important;
  }
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
  }
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important;
  }
  .mx-sm-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important;
  }
  .mx-sm-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
  .my-sm-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important;
  }
  .my-sm-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important;
  }
  .my-sm-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important;
  }
  .my-sm-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important;
  }
  .my-sm-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important;
  }
  .mt-sm-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-sm-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-sm-n3 {
    margin-top: -1rem !important;
  }
  .mt-sm-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-sm-n5 {
    margin-top: -3rem !important;
  }
  .me-sm-n1 {
    margin-right: -0.25rem !important;
  }
  .me-sm-n2 {
    margin-right: -0.5rem !important;
  }
  .me-sm-n3 {
    margin-right: -1rem !important;
  }
  .me-sm-n4 {
    margin-right: -1.5rem !important;
  }
  .me-sm-n5 {
    margin-right: -3rem !important;
  }
  .mb-sm-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-sm-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-sm-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-sm-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-sm-n5 {
    margin-bottom: -3rem !important;
  }
  .ms-sm-n1 {
    margin-left: -0.25rem !important;
  }
  .ms-sm-n2 {
    margin-left: -0.5rem !important;
  }
  .ms-sm-n3 {
    margin-left: -1rem !important;
  }
  .ms-sm-n4 {
    margin-left: -1.5rem !important;
  }
  .ms-sm-n5 {
    margin-left: -3rem !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-sm-0 {
    padding-top: 0 !important;
  }
  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pt-sm-3 {
    padding-top: 1rem !important;
  }
  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pt-sm-5 {
    padding-top: 3rem !important;
  }
  .pe-sm-0 {
    padding-right: 0 !important;
  }
  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pe-sm-3 {
    padding-right: 1rem !important;
  }
  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pe-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-0 {
    padding-bottom: 0 !important;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }
  .ps-sm-0 {
    padding-left: 0 !important;
  }
  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }
  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }
  .ps-sm-3 {
    padding-left: 1rem !important;
  }
  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }
  .ps-sm-5 {
    padding-left: 3rem !important;
  }
  .text-sm-start {
    text-align: left !important;
  }
  .text-sm-end {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }
  .float-md-end {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !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: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .gap-md-3 {
    gap: 1rem !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
  .gap-md-5 {
    gap: 3rem !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
  .order-md-first {
    order: -1 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
  .m-md-0 {
    margin: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-md-0 {
    margin-top: 0 !important;
  }
  .mt-md-1 {
    margin-top: 0.25rem !important;
  }
  .mt-md-2 {
    margin-top: 0.5rem !important;
  }
  .mt-md-3 {
    margin-top: 1rem !important;
  }
  .mt-md-4 {
    margin-top: 1.5rem !important;
  }
  .mt-md-5 {
    margin-top: 3rem !important;
  }
  .mt-md-auto {
    margin-top: auto !important;
  }
  .me-md-0 {
    margin-right: 0 !important;
  }
  .me-md-1 {
    margin-right: 0.25rem !important;
  }
  .me-md-2 {
    margin-right: 0.5rem !important;
  }
  .me-md-3 {
    margin-right: 1rem !important;
  }
  .me-md-4 {
    margin-right: 1.5rem !important;
  }
  .me-md-5 {
    margin-right: 3rem !important;
  }
  .me-md-auto {
    margin-right: auto !important;
  }
  .mb-md-0 {
    margin-bottom: 0 !important;
  }
  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-md-3 {
    margin-bottom: 1rem !important;
  }
  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-md-5 {
    margin-bottom: 3rem !important;
  }
  .mb-md-auto {
    margin-bottom: auto !important;
  }
  .ms-md-0 {
    margin-left: 0 !important;
  }
  .ms-md-1 {
    margin-left: 0.25rem !important;
  }
  .ms-md-2 {
    margin-left: 0.5rem !important;
  }
  .ms-md-3 {
    margin-left: 1rem !important;
  }
  .ms-md-4 {
    margin-left: 1.5rem !important;
  }
  .ms-md-5 {
    margin-left: 3rem !important;
  }
  .ms-md-auto {
    margin-left: auto !important;
  }
  .m-md-n1 {
    margin: -0.25rem !important;
  }
  .m-md-n2 {
    margin: -0.5rem !important;
  }
  .m-md-n3 {
    margin: -1rem !important;
  }
  .m-md-n4 {
    margin: -1.5rem !important;
  }
  .m-md-n5 {
    margin: -3rem !important;
  }
  .mx-md-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
  }
  .mx-md-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important;
  }
  .mx-md-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-md-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important;
  }
  .mx-md-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
  .my-md-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important;
  }
  .my-md-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important;
  }
  .my-md-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important;
  }
  .my-md-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important;
  }
  .my-md-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important;
  }
  .mt-md-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-md-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-md-n3 {
    margin-top: -1rem !important;
  }
  .mt-md-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-md-n5 {
    margin-top: -3rem !important;
  }
  .me-md-n1 {
    margin-right: -0.25rem !important;
  }
  .me-md-n2 {
    margin-right: -0.5rem !important;
  }
  .me-md-n3 {
    margin-right: -1rem !important;
  }
  .me-md-n4 {
    margin-right: -1.5rem !important;
  }
  .me-md-n5 {
    margin-right: -3rem !important;
  }
  .mb-md-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-md-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-md-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-md-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-md-n5 {
    margin-bottom: -3rem !important;
  }
  .ms-md-n1 {
    margin-left: -0.25rem !important;
  }
  .ms-md-n2 {
    margin-left: -0.5rem !important;
  }
  .ms-md-n3 {
    margin-left: -1rem !important;
  }
  .ms-md-n4 {
    margin-left: -1.5rem !important;
  }
  .ms-md-n5 {
    margin-left: -3rem !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pt-md-1 {
    padding-top: 0.25rem !important;
  }
  .pt-md-2 {
    padding-top: 0.5rem !important;
  }
  .pt-md-3 {
    padding-top: 1rem !important;
  }
  .pt-md-4 {
    padding-top: 1.5rem !important;
  }
  .pt-md-5 {
    padding-top: 3rem !important;
  }
  .pe-md-0 {
    padding-right: 0 !important;
  }
  .pe-md-1 {
    padding-right: 0.25rem !important;
  }
  .pe-md-2 {
    padding-right: 0.5rem !important;
  }
  .pe-md-3 {
    padding-right: 1rem !important;
  }
  .pe-md-4 {
    padding-right: 1.5rem !important;
  }
  .pe-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-md-3 {
    padding-bottom: 1rem !important;
  }
  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-md-5 {
    padding-bottom: 3rem !important;
  }
  .ps-md-0 {
    padding-left: 0 !important;
  }
  .ps-md-1 {
    padding-left: 0.25rem !important;
  }
  .ps-md-2 {
    padding-left: 0.5rem !important;
  }
  .ps-md-3 {
    padding-left: 1rem !important;
  }
  .ps-md-4 {
    padding-left: 1.5rem !important;
  }
  .ps-md-5 {
    padding-left: 3rem !important;
  }
  .text-md-start {
    text-align: left !important;
  }
  .text-md-end {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }
  .float-lg-end {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !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: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .gap-lg-3 {
    gap: 1rem !important;
  }
  .gap-lg-4 {
    gap: 1.5rem !important;
  }
  .gap-lg-5 {
    gap: 3rem !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
  .order-lg-first {
    order: -1 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
  .m-lg-0 {
    margin: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-lg-0 {
    margin-top: 0 !important;
  }
  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mt-lg-3 {
    margin-top: 1rem !important;
  }
  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mt-lg-5 {
    margin-top: 3rem !important;
  }
  .mt-lg-auto {
    margin-top: auto !important;
  }
  .me-lg-0 {
    margin-right: 0 !important;
  }
  .me-lg-1 {
    margin-right: 0.25rem !important;
  }
  .me-lg-2 {
    margin-right: 0.5rem !important;
  }
  .me-lg-3 {
    margin-right: 1rem !important;
  }
  .me-lg-4 {
    margin-right: 1.5rem !important;
  }
  .me-lg-5 {
    margin-right: 3rem !important;
  }
  .me-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }
  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }
  .mb-lg-auto {
    margin-bottom: auto !important;
  }
  .ms-lg-0 {
    margin-left: 0 !important;
  }
  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }
  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }
  .ms-lg-3 {
    margin-left: 1rem !important;
  }
  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }
  .ms-lg-5 {
    margin-left: 3rem !important;
  }
  .ms-lg-auto {
    margin-left: auto !important;
  }
  .m-lg-n1 {
    margin: -0.25rem !important;
  }
  .m-lg-n2 {
    margin: -0.5rem !important;
  }
  .m-lg-n3 {
    margin: -1rem !important;
  }
  .m-lg-n4 {
    margin: -1.5rem !important;
  }
  .m-lg-n5 {
    margin: -3rem !important;
  }
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
  }
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important;
  }
  .mx-lg-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important;
  }
  .mx-lg-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
  .my-lg-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important;
  }
  .my-lg-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important;
  }
  .my-lg-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important;
  }
  .my-lg-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important;
  }
  .my-lg-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important;
  }
  .mt-lg-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-lg-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-lg-n3 {
    margin-top: -1rem !important;
  }
  .mt-lg-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-lg-n5 {
    margin-top: -3rem !important;
  }
  .me-lg-n1 {
    margin-right: -0.25rem !important;
  }
  .me-lg-n2 {
    margin-right: -0.5rem !important;
  }
  .me-lg-n3 {
    margin-right: -1rem !important;
  }
  .me-lg-n4 {
    margin-right: -1.5rem !important;
  }
  .me-lg-n5 {
    margin-right: -3rem !important;
  }
  .mb-lg-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-lg-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-lg-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-lg-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-lg-n5 {
    margin-bottom: -3rem !important;
  }
  .ms-lg-n1 {
    margin-left: -0.25rem !important;
  }
  .ms-lg-n2 {
    margin-left: -0.5rem !important;
  }
  .ms-lg-n3 {
    margin-left: -1rem !important;
  }
  .ms-lg-n4 {
    margin-left: -1.5rem !important;
  }
  .ms-lg-n5 {
    margin-left: -3rem !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-lg-0 {
    padding-top: 0 !important;
  }
  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pt-lg-3 {
    padding-top: 1rem !important;
  }
  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pt-lg-5 {
    padding-top: 3rem !important;
  }
  .pe-lg-0 {
    padding-right: 0 !important;
  }
  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pe-lg-3 {
    padding-right: 1rem !important;
  }
  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pe-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }
  .ps-lg-0 {
    padding-left: 0 !important;
  }
  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }
  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }
  .ps-lg-3 {
    padding-left: 1rem !important;
  }
  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }
  .ps-lg-5 {
    padding-left: 3rem !important;
  }
  .text-lg-start {
    text-align: left !important;
  }
  .text-lg-end {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important;
  }
  .float-xl-end {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !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: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-xl-0 {
    gap: 0 !important;
  }
  .gap-xl-1 {
    gap: 0.25rem !important;
  }
  .gap-xl-2 {
    gap: 0.5rem !important;
  }
  .gap-xl-3 {
    gap: 1rem !important;
  }
  .gap-xl-4 {
    gap: 1.5rem !important;
  }
  .gap-xl-5 {
    gap: 3rem !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-baseline {
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    align-self: stretch !important;
  }
  .order-xl-first {
    order: -1 !important;
  }
  .order-xl-0 {
    order: 0 !important;
  }
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
  .m-xl-0 {
    margin: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xl-0 {
    margin-top: 0 !important;
  }
  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xl-3 {
    margin-top: 1rem !important;
  }
  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xl-5 {
    margin-top: 3rem !important;
  }
  .mt-xl-auto {
    margin-top: auto !important;
  }
  .me-xl-0 {
    margin-right: 0 !important;
  }
  .me-xl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xl-3 {
    margin-right: 1rem !important;
  }
  .me-xl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xl-5 {
    margin-right: 3rem !important;
  }
  .me-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xl-auto {
    margin-bottom: auto !important;
  }
  .ms-xl-0 {
    margin-left: 0 !important;
  }
  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xl-3 {
    margin-left: 1rem !important;
  }
  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xl-5 {
    margin-left: 3rem !important;
  }
  .ms-xl-auto {
    margin-left: auto !important;
  }
  .m-xl-n1 {
    margin: -0.25rem !important;
  }
  .m-xl-n2 {
    margin: -0.5rem !important;
  }
  .m-xl-n3 {
    margin: -1rem !important;
  }
  .m-xl-n4 {
    margin: -1.5rem !important;
  }
  .m-xl-n5 {
    margin: -3rem !important;
  }
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
  }
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important;
  }
  .mx-xl-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important;
  }
  .mx-xl-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
  .my-xl-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important;
  }
  .my-xl-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important;
  }
  .my-xl-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important;
  }
  .my-xl-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important;
  }
  .my-xl-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important;
  }
  .mt-xl-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-xl-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-xl-n3 {
    margin-top: -1rem !important;
  }
  .mt-xl-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-xl-n5 {
    margin-top: -3rem !important;
  }
  .me-xl-n1 {
    margin-right: -0.25rem !important;
  }
  .me-xl-n2 {
    margin-right: -0.5rem !important;
  }
  .me-xl-n3 {
    margin-right: -1rem !important;
  }
  .me-xl-n4 {
    margin-right: -1.5rem !important;
  }
  .me-xl-n5 {
    margin-right: -3rem !important;
  }
  .mb-xl-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-xl-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-xl-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-xl-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-xl-n5 {
    margin-bottom: -3rem !important;
  }
  .ms-xl-n1 {
    margin-left: -0.25rem !important;
  }
  .ms-xl-n2 {
    margin-left: -0.5rem !important;
  }
  .ms-xl-n3 {
    margin-left: -1rem !important;
  }
  .ms-xl-n4 {
    margin-left: -1.5rem !important;
  }
  .ms-xl-n5 {
    margin-left: -3rem !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xl-0 {
    padding-top: 0 !important;
  }
  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xl-3 {
    padding-top: 1rem !important;
  }
  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xl-5 {
    padding-top: 3rem !important;
  }
  .pe-xl-0 {
    padding-right: 0 !important;
  }
  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xl-3 {
    padding-right: 1rem !important;
  }
  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xl-0 {
    padding-left: 0 !important;
  }
  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xl-3 {
    padding-left: 1rem !important;
  }
  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xl-5 {
    padding-left: 3rem !important;
  }
  .text-xl-start {
    text-align: left !important;
  }
  .text-xl-end {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}
@media (min-width: 1500px) {
  .float-xxl-start {
    float: left !important;
  }
  .float-xxl-end {
    float: right !important;
  }
  .float-xxl-none {
    float: none !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .gap-xxl-1 {
    gap: 0.25rem !important;
  }
  .gap-xxl-2 {
    gap: 0.5rem !important;
  }
  .gap-xxl-3 {
    gap: 1rem !important;
  }
  .gap-xxl-4 {
    gap: 1.5rem !important;
  }
  .gap-xxl-5 {
    gap: 3rem !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-baseline {
    align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-content-xxl-start {
    align-content: flex-start !important;
  }
  .align-content-xxl-end {
    align-content: flex-end !important;
  }
  .align-content-xxl-center {
    align-content: center !important;
  }
  .align-content-xxl-between {
    align-content: space-between !important;
  }
  .align-content-xxl-around {
    align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    align-content: stretch !important;
  }
  .align-self-xxl-auto {
    align-self: auto !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-end {
    align-self: flex-end !important;
  }
  .align-self-xxl-center {
    align-self: center !important;
  }
  .align-self-xxl-baseline {
    align-self: baseline !important;
  }
  .align-self-xxl-stretch {
    align-self: stretch !important;
  }
  .order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
  .m-xxl-0 {
    margin: 0 !important;
  }
  .m-xxl-1 {
    margin: 0.25rem !important;
  }
  .m-xxl-2 {
    margin: 0.5rem !important;
  }
  .m-xxl-3 {
    margin: 1rem !important;
  }
  .m-xxl-4 {
    margin: 1.5rem !important;
  }
  .m-xxl-5 {
    margin: 3rem !important;
  }
  .m-xxl-auto {
    margin: auto !important;
  }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xxl-0 {
    margin-top: 0 !important;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xxl-3 {
    margin-top: 1rem !important;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xxl-5 {
    margin-top: 3rem !important;
  }
  .mt-xxl-auto {
    margin-top: auto !important;
  }
  .me-xxl-0 {
    margin-right: 0 !important;
  }
  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xxl-3 {
    margin-right: 1rem !important;
  }
  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xxl-5 {
    margin-right: 3rem !important;
  }
  .me-xxl-auto {
    margin-right: auto !important;
  }
  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xxl-auto {
    margin-bottom: auto !important;
  }
  .ms-xxl-0 {
    margin-left: 0 !important;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xxl-3 {
    margin-left: 1rem !important;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xxl-5 {
    margin-left: 3rem !important;
  }
  .ms-xxl-auto {
    margin-left: auto !important;
  }
  .m-xxl-n1 {
    margin: -0.25rem !important;
  }
  .m-xxl-n2 {
    margin: -0.5rem !important;
  }
  .m-xxl-n3 {
    margin: -1rem !important;
  }
  .m-xxl-n4 {
    margin: -1.5rem !important;
  }
  .m-xxl-n5 {
    margin: -3rem !important;
  }
  .mx-xxl-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
  }
  .mx-xxl-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important;
  }
  .mx-xxl-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
  }
  .mx-xxl-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important;
  }
  .mx-xxl-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important;
  }
  .my-xxl-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important;
  }
  .my-xxl-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important;
  }
  .my-xxl-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important;
  }
  .my-xxl-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important;
  }
  .my-xxl-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important;
  }
  .mt-xxl-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-xxl-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-xxl-n3 {
    margin-top: -1rem !important;
  }
  .mt-xxl-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-xxl-n5 {
    margin-top: -3rem !important;
  }
  .me-xxl-n1 {
    margin-right: -0.25rem !important;
  }
  .me-xxl-n2 {
    margin-right: -0.5rem !important;
  }
  .me-xxl-n3 {
    margin-right: -1rem !important;
  }
  .me-xxl-n4 {
    margin-right: -1.5rem !important;
  }
  .me-xxl-n5 {
    margin-right: -3rem !important;
  }
  .mb-xxl-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-xxl-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-xxl-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-xxl-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-xxl-n5 {
    margin-bottom: -3rem !important;
  }
  .ms-xxl-n1 {
    margin-left: -0.25rem !important;
  }
  .ms-xxl-n2 {
    margin-left: -0.5rem !important;
  }
  .ms-xxl-n3 {
    margin-left: -1rem !important;
  }
  .ms-xxl-n4 {
    margin-left: -1.5rem !important;
  }
  .ms-xxl-n5 {
    margin-left: -3rem !important;
  }
  .p-xxl-0 {
    padding: 0 !important;
  }
  .p-xxl-1 {
    padding: 0.25rem !important;
  }
  .p-xxl-2 {
    padding: 0.5rem !important;
  }
  .p-xxl-3 {
    padding: 1rem !important;
  }
  .p-xxl-4 {
    padding: 1.5rem !important;
  }
  .p-xxl-5 {
    padding: 3rem !important;
  }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xxl-0 {
    padding-top: 0 !important;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xxl-3 {
    padding-top: 1rem !important;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xxl-5 {
    padding-top: 3rem !important;
  }
  .pe-xxl-0 {
    padding-right: 0 !important;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xxl-3 {
    padding-right: 1rem !important;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xxl-5 {
    padding-right: 3rem !important;
  }
  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xxl-0 {
    padding-left: 0 !important;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xxl-3 {
    padding-left: 1rem !important;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
  .text-xxl-start {
    text-align: left !important;
  }
  .text-xxl-end {
    text-align: right !important;
  }
  .text-xxl-center {
    text-align: center !important;
  }
}
@media (min-width: 1500px) {
  .fs-1 {
    font-size: 3.938rem !important;
  }
  .fs-2 {
    font-size: 3.375rem !important;
  }
  .fs-3 {
    font-size: 2.813rem !important;
  }
  .fs-4 {
    font-size: 2.25rem !important;
  }
  .fs-5 {
    font-size: 1.688rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !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: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
  .d-print-none {
    display: none !important;
  }
}
/* 
// Override Variables -------------

// @import "../components/syncfusion/variables";

// ---------------------------------




// Base
@import "ej2-base/styles/bootstrap4.scss";

// Navigations  
@import "ej2-navigations/styles/bootstrap4.scss";

// @import 'ej2-navigations/styles/h-scroll/bootstrap4.scss';
// @import 'ej2-navigations/styles/v-scroll/bootstrap4.scss';
@import 'ej2-navigations/styles/toolbar/bootstrap4.scss';
@import 'ej2-navigations/styles/accordion/bootstrap4.scss';
// @import 'ej2-navigations/styles/context-menu/bootstrap4.scss';
@import 'ej2-navigations/styles/tab/bootstrap4.scss';
// @import 'ej2-navigations/styles/treeview/bootstrap4.scss';
// @import 'ej2-navigations/styles/sidebar/bootstrap4.scss';
// @import 'ej2-navigations/styles/menu/bootstrap4.scss';


// Inputs
@import "ej2-inputs/styles/bootstrap4.scss";

// Buttons  
@import "ej2-buttons/styles/bootstrap4.scss";

// Dropdowns  
@import "ej2-dropdowns/styles/bootstrap4.scss";

// Popups
@import "ej2-popups/styles/bootstrap4.scss";

// Grids  
@import "ej2-grids/styles/bootstrap4.scss";

// Calendars  
@import "ej2-calendars/styles/bootstrap4.scss";

// Cards 
@import "ej2/card/bootstrap4.scss";

// Notifications  
@import "ej2-notifications/styles/bootstrap4.scss";

// Rich Text Editor  
@import "ej2-richtexteditor/styles/bootstrap4.scss";




////////////////////////////////////////
// TESTING imports  

// ej
// @import "ej2/bootstrap4.scss";

// @import "ej2/base/bootstrap4.scss";
// @import "ej2/accordion/bootstrap4.scss";
// @import "ej2/drop-down-list/bootstrap4.scss";
// @import "ej2/input/bootstrap4.scss";
// @import "ej2/popup/bootstrap4.scss";
// @import "ej2/spinner/bootstrap4.scss";
// @import "ej2/drop-down-base/bootstrap4.scss";
// @import "ej2/auto-complete/bootstrap4.scss";
// @import "ej2/avatar/bootstrap4.scss";
// @import "ej2/badge/bootstrap4.scss";
// @import "ej2/barcode/bootstrap4.scss";
// @import "ej2/button/bootstrap4.scss";
// @import "ej2/calendar/bootstrap4.scss";
// @import "ej2/card/bootstrap4.scss";
// @import "ej2/check-box/bootstrap4.scss";
// @import "ej2/chips/bootstrap4.scss";
// @import "ej2/drop-down-button/bootstrap4.scss";
// @import "ej2/split-button/bootstrap4.scss";
// @import "ej2/numerictextbox/bootstrap4.scss";
// @import "ej2/tooltip/bootstrap4.scss";
// @import "ej2/slider/bootstrap4.scss";
// @import "ej2/color-picker/bootstrap4.scss";
// @import "ej2/combo-box/bootstrap4.scss";
// @import "ej2/context-menu/bootstrap4.scss";
// @import "ej2/dashboard-layout/bootstrap4.scss";
// @import "ej2/datepicker/bootstrap4.scss";
// @import "ej2/radio-button/bootstrap4.scss";
// @import "ej2/switch/bootstrap4.scss";
// @import "ej2/list-view/bootstrap4.scss";
// @import "ej2/sortable/bootstrap4.scss";
// @import "ej2/daterangepicker/bootstrap4.scss";
// @import "ej2/datetimepicker/bootstrap4.scss";
// @import "ej2/maskedtextbox/bootstrap4.scss";
// @import "ej2/textbox/bootstrap4.scss";
// @import "ej2/uploader/bootstrap4.scss";
// @import "ej2/dialog/bootstrap4.scss";
// @import "ej2/h-scroll/bootstrap4.scss";
// @import "ej2/v-scroll/bootstrap4.scss";
// @import "ej2/toolbar/bootstrap4.scss";
// @import "ej2/tab/bootstrap4.scss";
// @import "ej2/treeview/bootstrap4.scss";
// @import "ej2/sidebar/bootstrap4.scss";
// @import "ej2/menu/bootstrap4.scss";
// @import "ej2/diagram/bootstrap4.scss";
// @import "ej2/drop-down-tree/bootstrap4.scss";
// @import "ej2/multi-select/bootstrap4.scss";
// @import "ej2/list-box/bootstrap4.scss";
// @import "ej2/document-editor/bootstrap4.scss";
// @import "ej2/document-editor-container/bootstrap4.scss";
// @import "ej2/drawing/bootstrap4.scss";
// @import "ej2/splitter/bootstrap4.scss";
// @import "ej2/pager/bootstrap4.scss";
// @import "ej2/excel-filter/bootstrap4.scss";
// @import "ej2/grid/bootstrap4.scss";
// @import "ej2/file-manager/bootstrap4.scss";
// @import "ej2/treegrid/bootstrap4.scss";
// @import "ej2/button-group/bootstrap4.scss";
// @import "ej2/progress-button/bootstrap4.scss";
// @import "ej2/rich-text-editor/bootstrap4.scss";
// @import "ej2/gantt/bootstrap4.scss";
// @import "ej2/inplace-editor/bootstrap4.scss";
// @import "ej2/kanban/bootstrap4.scss";
// @import "ej2/toast/bootstrap4.scss";
// @import "ej2/pdfviewer/bootstrap4.scss";
// @import "ej2/timepicker/bootstrap4.scss";
// @import "ej2/pivotfieldlist/bootstrap4.scss";
// @import "ej2/pivotview/bootstrap4.scss";
// @import "ej2/query-builder/bootstrap4.scss";
// @import "ej2/recurrence-editor/bootstrap4.scss";
// @import "ej2/ribbon/bootstrap4.scss";
// @import "ej2/schedule/bootstrap4.scss";
// @import "ej2/spreadsheet/bootstrap4.scss";


 */
.app > main > .content, .app > main > .sidebar, .blazored-modal-container .blazored-modal {
  scrollbar-width: auto;
  scrollbar-color: rgba(0, 0, 0, 0.27) rgba(0, 0, 0, 0);
}
.app > main > .content::-webkit-scrollbar, .app > main > .sidebar::-webkit-scrollbar, .blazored-modal-container .blazored-modal::-webkit-scrollbar {
  width: 13px;
}
.app > main > .content::-webkit-scrollbar-track, .app > main > .sidebar::-webkit-scrollbar-track, .blazored-modal-container .blazored-modal::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}
.app > main > .content::-webkit-scrollbar-thumb, .app > main > .sidebar::-webkit-scrollbar-thumb, .blazored-modal-container .blazored-modal::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.27);
  border-radius: 50px;
  border: 3px solid rgba(0, 0, 0, 0);
}

.nav-platform .top-bar .nav-modules button {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  text-align: inherit;
  background: transparent;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
}

.pagination .page-item .page-link, .blazored-modal-container .blazored-modal-close {
  display: flex;
  padding: 0.33rem 0.75rem;
  border: 1px solid #E6E8EB;
  cursor: pointer;
}

.header__horizont .log-out::before, .header__horizont a.button-icon::before,
.header__horizont button.button-icon::before {
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: #d9d8d7;
}

.header__horizont .log-out::before, .header__horizont a.button-icon::before,
.header__horizont button.button-icon::before {
  left: 0;
}

.patient .disabled-biometry-img, .nav-tabs .nav-item .nav-link.disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  text-decoration: none;
  outline: 0;
  box-shadow: none;
}

.header__control-bar .btn-control-bar:disabled {
  border-color: transparent;
  box-shadow: none;
  text-shadow: none;
  pointer-events: none;
  cursor: not-allowed !important;
  opacity: 0.33;
  outline: 0;
}
.header__control-bar .btn-control-bar:disabled i[class*=fa] {
  text-shadow: none;
}

.b-table.table tr .table-context-menu-holder .btn {
  opacity: 0;
  visibility: hidden;
}

.b-table.table tr:hover .table-context-menu-holder .btn {
  opacity: 1;
  visibility: visible;
}

.hidden, .department-type-input,
.departments-subset-input, .table thead tr th.sort .activate-sort,
.table-fixed-header > .table thead tr th.sort .activate-sort {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  cursor: default;
  pointer-events: none;
  padding: 0 !important;
}

.btn {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09), 0 3px 9px rgba(0, 0, 0, 0.18);
  width: max-content;
}
.btn:hover {
  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.09), 0 1px 6px rgba(0, 0, 0, 0.09);
}

html body.app form .b-numeric-handler.btn {
  position: relative;
  display: flex;
  width: 100%;
  height: 50%;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 700;
  line-height: 0;
  align-items: center;
  padding: 0;
  font-size: 1rem;
  border-radius: 3px;
}

.blazored-modal-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.blazored-modal-container .blazored-modal-fade-in {
  animation-duration: 250ms !important;
  animation-delay: 0s !important;
  animation-name: ModalFadeIn1 !important;
}
.blazored-modal-container .blazored-modal-fade-in.blazored-modal-fade-out {
  animation-duration: 100ms !important;
  animation-delay: 0s !important;
  animation-name: ModalFadeOut1 !important;
}
@keyframes ModalFadeIn1 {
  0% {
    transform: scale(0.54);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ModalFadeOut1 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.66);
  }
}
.blazored-modal-container .blazored-modal-overlay {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 101;
  background-color: rgba(30, 30, 31, 0.81);
  top: 0;
  left: 0;
}
.blazored-modal-container .blazored-modal {
  display: flex;
  flex-direction: column;
  width: 96vw;
  max-width: fit-content;
  height: 96vh;
  z-index: 102;
  background-color: #FCFCFA;
  border-radius: 3px;
  border: 1px solid #fff;
  padding: 1.5rem;
  padding-top: 0.75rem;
  box-shadow: 0 3px 27px 3px rgba(30, 30, 31, 0.72);
  overflow-x: auto;
}
@media (min-width: 400px) {
  .blazored-modal-container .blazored-modal {
    width: max-content;
    height: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
@media (min-width: 576px) {
  .blazored-modal-container .blazored-modal {
    width: max-content;
  }
}
@media (min-width: 768px) {
  .blazored-modal-container .blazored-modal {
    min-width: 450px;
    width: max-content;
  }
}
@media (min-width: 1200px) {
  .blazored-modal-container .blazored-modal {
    margin: 1.5rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.blazored-modal-container .blazored-modal-header {
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: -0.75rem;
  z-index: 99;
  padding: 0.75rem 1.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-top: -0.75rem;
  border-bottom: 1px solid #B4B5B8;
  background-color: #FCFCFA;
}
.blazored-modal-container .blazored-modal-title {
  margin-bottom: 0;
  font-size: calc(1.2708333333rem + 0.2444444444vw);
  font-weight: 100;
  color: var(--brand-dark);
}
@media (min-width: 1500px) {
  .blazored-modal-container .blazored-modal-title {
    font-size: 1.5rem;
  }
}
.blazored-modal-container .blazored-modal-close {
  background-color: #F7F6F2;
  font-size: 1.5rem;
  border-radius: 3px;
  margin-left: 0.75rem;
  font-weight: bold;
  margin-right: 0;
}
.blazored-modal-container .blazored-modal-close:hover {
  background-color: #fff;
}
.blazored-modal-container .blazored-modal-close span {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  font-weight: 900;
  line-height: 1;
  display: inline-block;
}
@media (min-width: 1200px) {
  .blazored-modal-container.modal-fixed-width-60 .blazored-modal {
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Figma: confirm/delete dialog — compact auto-height card. Applied via CssClass
   on Modal.Show<DeleteConfirmModal> in OrgStruct.razor (reusable for other
   confirm dialogs). Same header/title/close chrome as the orgnode modal below,
   sized for a short message + footer instead of a full form. NOTE: this file
   (horizont_AIFM/Server/wwwroot/app/app.css) is the shell's hand-maintained
   global stylesheet — kept in parallel with hModule/Server/wwwroot/css/app.css. */
.blazored-modal-container.modal-figma-confirm .blazored-modal {
  /* Center against the viewport via fixed + translate. The full-screen flex
     container didn't reliably center this short dialog vertically (it pinned
     top-left), so the card positions itself. animation: none disables the
     default scale-in keyframes — their `transform: scale()` would otherwise
     override this centering transform mid-animation. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 411px;
  max-width: 92vw;
  height: auto;
  max-height: 90vh;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  border-radius: var(--radius-radius-xl, 12px);
  /* Override the default modal's overflow-x: auto (the stray bottom scrollbar). */
  overflow: hidden;
  border: none;
}
.blazored-modal-container.modal-figma-confirm .blazored-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  margin: 0;
  position: static;
  top: auto;
  min-height: 48px;
  height: 48px;
  border-bottom: 1px solid var(--border-muted, #E0E0E0);
  border-top-left-radius: var(--radius-radius-xl, 12px);
  border-top-right-radius: var(--radius-radius-xl, 12px);
  background: #FFFFFF;
}
.blazored-modal-container.modal-figma-confirm .blazored-modal-title {
  flex: 1 0 0;
  margin: 0;
  color: var(--neutral-strong, #616161);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  text-transform: none;
}
.blazored-modal-container.modal-figma-confirm .blazored-modal-close {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  padding: var(--spacing-sm, 8px);
  margin: 0;
  border: none;
  border-radius: var(--radius-radius-md, 4px);
  background-color: var(--neutral-default, #FFFFFF);
  background-image: url("/img/figma-asset/x-close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  font-size: 0;
  color: transparent;
  text-shadow: none;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.blazored-modal-container.modal-figma-confirm .blazored-modal-close:hover {
  background-color: var(--neutral-subtle, #EEEEEE);
}
.blazored-modal-container.modal-figma-confirm .blazored-modal-close span {
  font-size: 0;
  color: transparent;
  text-shadow: none;
}
.blazored-modal-container.modal-figma-confirm .blazored-modal-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  flex: 1 1 auto;
  padding: 0;
  min-height: 0;
  overflow-y: auto;
}
/* Figma: OrgNode add/edit modal — fixed 635x727 card, flex-column body,
   children stacked + horizontally centered. Applied via CssClass on
   Modal.Show<DynForm<OrgNodeFormModel>> in OrgStruct.razor. */
.blazored-modal-container.modal-figma-orgnode .blazored-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 635px;
  height: 727px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  /* Card chrome — top corners rounded (header inherits); white fill. */
  background-color: #FFFFFF;
  border-radius: 12px;
  /* overflow: visible (not hidden) so the flatpickr date-picker calendar
     can escape the modal's bottom edge when opened from "Vrijedi od/do"
     fields — otherwise the calendar gets clipped or forces the modal
     content to scroll. The header + footer have their own border-radius
     (12px top / 12px bottom) so the rounded card silhouette is preserved
     even without the parent's overflow clipping. */
  overflow: visible;
  /* CANCEL the default 1px white border (line 10385). With the global
     `* { box-sizing: border-box }` reset (line 211) that border eats 2px
     out of the modal's 635px width — leaving 633px of content. */
  border: none;
}
/* Figma: modal HEADER — flex row, title left + close-X right, 8/12 padding,
   1px bottom border, top corners rounded (radius hides at the card-level
   overflow: hidden anyway). */
.blazored-modal-container.modal-figma-orgnode .blazored-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  /* CANCEL the default Blazored header's negative margins + sticky
     positioning. Default rule (line 10417 in app.css) pulls the header
     OUT of its parent's padding via margin: -0.75rem -1.5rem -1.5rem
     because the default modal has padding: 1.5rem. Our modal has
     padding: 0, so those negative margins shove the header 48px past
     the card edge. Reset to zero. */
  margin: 0;
  position: static;
  top: auto;
  /* Lock the header height. Without this, the header shrinks by 14px the
     first time the form goes dirty: DynForm.razor:8-11 injects a runtime
     <style>.bm-close { display: none !important }</style> when
     ShowDiscardWhenDirty + _isDirty, which removes the 32x32 close button
     from the header's flex layout. The header then sizes to the 18px title
     instead — and every line of form content visibly slides UP 14px to
     fill the freed space. Pinning the height freezes the chrome regardless
     of which children are visible. */
  min-height: 48px;
  height: 48px;
  border-bottom: 1px solid var(--border-muted, #E0E0E0);
  border-top-left-radius: var(--radius-radius-xl, 12px);
  border-top-right-radius: var(--radius-radius-xl, 12px);
  /* Override Blazored's default diagonal-stripe placeholder fill. */
  background: #FFFFFF;
}
/* Figma: header TITLE text — Inter 18 / weight 300, neutral-strong gray,
   takes all remaining horizontal space (flex: 1 0 0) so the close button
   stays right-anchored even when the title is short. */
.blazored-modal-container.modal-figma-orgnode .blazored-modal-title {
  flex: 1 0 0;
  margin: 0;
  color: var(--neutral-strong, #616161);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  /* Figma line-height was 12px (66.667%). On its own that would clip
     ascenders/descenders, but the header is bounded + align-items: center,
     so the glyph anchors visually centered. Using 1 (~18px) instead of
     the literal 12px to avoid layout edge cases on browsers that compute
     overflow against the line-box rather than the glyph metrics. */
  line-height: 1;
  text-transform: none;
}
/* Figma: header CLOSE button — 32x32 white tile, 4px radius, x-close.svg
   centered. Hides Blazored's default text × via font-size: 0 and renders
   the icon via background-image (same x-close.svg used on asset page). */
.blazored-modal-container.modal-figma-orgnode .blazored-modal-close {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  height: 32px;
  width: 32px;
  padding: var(--spacing-sm, 8px);
  margin: 0;
  border: none;
  border-radius: var(--radius-radius-md, 4px);
  background-color: var(--neutral-default, #FFFFFF);
  background-image: url("/img/figma-asset/x-close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  /* Hide the literal "×" character Blazored renders inside the button. */
  font-size: 0;
  color: transparent;
  text-shadow: none;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.blazored-modal-container.modal-figma-orgnode .blazored-modal-close:hover {
  background-color: var(--neutral-subtle, #EEEEEE);
}
/* Belt-and-suspenders: also blank the inner <span> that holds the ×
   so older Blazored builds (which apply text-shadow on the span, not
   the button) don't leak the glyph through. */
.blazored-modal-container.modal-figma-orgnode .blazored-modal-close span {
  font-size: 0;
  color: transparent;
  text-shadow: none;
}
/* Hide DynForm's built-in Save/Discard buttons holder. We render our own
   footer instead. Belt-and-suspenders alongside the scoped ::deep rule in
   OrgNodeFormDialog.razor.css — when DynForm first becomes "dirty" on the
   first blur, the .buttons-holder briefly tries to render its child buttons.
   If the scoped ::deep selector doesn't catch them on that first render
   (Blazor CSS isolation race), content height jumps. This global rule is a
   safety net so it's hidden unconditionally. */
.blazored-modal-container.modal-figma-orgnode .buttons-holder {
  display: none !important;
}

/* Figma: modal BODY — flex column container, fills remaining vertical
   space below the header (flex: 1 0 0), stretches full width, items
   anchored to start. Cancels Blazored's default padding-top: 1.5rem so
   inner sections control their own spacing. */
.blazored-modal-container.modal-figma-orgnode .blazored-modal-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  padding: 0;
  min-height: 0;
  /* Scrolling moved INTO the .fd wrapper so the footer stays pinned to the
     card bottom regardless of form-area scroll. The form scrolls inside the
     DynForm wrapper (see FormDialog.razor.css `::deep > div:not(...)` rule). */
  overflow: hidden;
}
/* KarticaJI (Asset form) — Figma override: wider card to fit the tabbed
   6-section form. Apply via `CssClass = "modal-figma-orgnode kji-modal"`. */
.blazored-modal-container.modal-figma-orgnode.kji-modal .blazored-modal {
  width: 900px;
  height: 772px;
}
/* Policy register (InsurancePolicy) — 7-tab form needs a wider card than KarticaJI
   so all seven tab labels sit on one row. Apply via `CssClass = "modal-figma-orgnode pol-modal"`. */
.blazored-modal-container.modal-figma-orgnode.pol-modal .blazored-modal {
  width: 1180px;
  max-width: 96vw;
  height: 772px;
}
/* Seven long Croatian tab labels: lay the tab strip out in-flow and allow it to
   wrap to a second row, so it can never overflow the card on a narrow viewport.
   (Default .fd-tabs is position:absolute single-row — fine for ≤6 short tabs.) */
.blazored-modal-container.pol-modal .fd-tabbed {
  padding-top: 8px;
}
.blazored-modal-container.pol-modal .fd-tabs {
  position: static !important;
  flex-wrap: wrap !important;
  row-gap: 4px;
  margin-bottom: 8px;
}

/* ============================================================================
   IM grids — standalone <TelerikPager class="ar-footer-pager"> lives in the
   .ar-footer (per Figma: pager in the footer, not inside the table). Skin it to
   match Registar imovine's footer pager: transparent (inherits the footer bg),
   28x28 white pill buttons, #E0E0E0 outline, 4px radius; active page = brand-
   base fill + white + bold. Layout: rows-per-page dropdown then page buttons.
   Using Telerik's pager component (not a custom one) per "use Telerik components".
   ============================================================================ */
.ar-footer-pager.k-pager {
  background: transparent;
  border: none;
  color: #6E6E6E;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  padding: 0;
  gap: 8px;
  min-height: 28px;
}
/* All pager buttons (page numbers + first/prev/next/last arrows) → 28x28 pill. */
.ar-footer-pager .k-button {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: #FFFFFF !important;
  border: 1px solid #E0E0E0 !important;
  border-radius: 4px !important;
  color: #212121 !important;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none !important;
}
.ar-footer-pager .k-button:hover:not(.k-selected):not(.k-disabled) {
  border-color: #6CA5D9 !important;
  color: #3A72A8 !important;
}
.ar-footer-pager .k-button.k-selected {
  background: #6CA5D9 !important;
  border-color: #6CA5D9 !important;
  color: #FFFFFF !important;
  font-weight: 700;
}
.ar-footer-pager .k-button.k-disabled,
.ar-footer-pager .k-button:disabled {
  opacity: 0.6;
}
/* Rows-per-page dropdown — neutral outline, compact. */
.ar-footer-pager .k-pager-sizes .k-dropdownlist {
  min-width: 72px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  background: #FFFFFF;
}
.ar-footer-pager .k-pager-sizes,
.ar-footer-pager .k-pager-info { color: #6E6E6E; font-size: 12px; }
/* Footer holds stats (left) + pager (right). */
.ar-footer-paging { display: flex; align-items: center; }

/* Telerik's ADAPTIVE pager logic (k-pager-responsive) decides the pager is too
   narrow and hides the number buttons / size dropdown / info via inline
   display:none, leaving only the compact "Page [x] of y" input box. We always
   want the full Figma layout, so force the real elements visible (external
   !important beats Telerik's inline style) and hide the input box. */
.ar-footer-pager .k-pager-numbers { display: inline-flex !important; }
.ar-footer-pager .k-pager-numbers-wrap { order: 1; }      /* page buttons on the RIGHT */
.ar-footer-pager .k-pager-input   { display: none !important; }   /* hide "Page [..] of N" box */
.ar-footer-pager .k-pager-info    { display: none !important; }   /* remove "1 - x of y items" */
/* Rows-per-page selection to the LEFT of the page buttons (per design). */
.ar-footer-pager .k-pager-sizes   { display: inline-flex !important; order: 0; align-items: center; gap: 6px; }
.ar-footer-pager .k-pager-sizes .k-dropdownlist { display: inline-flex !important; }
/* Croatian "items per page" label (app is hr-HR). Telerik's own English label
   (.k-pager-sizes-label / data-title="pager-sizes-label") stays hidden. */
.ar-footer-pager .k-pager-sizes::after {
  content: "Zapisa po stranici";
  color: #6E6E6E;
  font-size: 12px;
  white-space: nowrap;
  order: 3;
}

/* Filter multiselect dropdowns (InsMultiCombo .mc-pop): the popup is constrained
   to the (narrow) filter-panel width and the scrollable .ar-filter-body clips
   anything wider, so a long option (e.g. a currency name) was truncated to
   "AED — Dirham U…". Let the labels WRAP so the full text is readable at the
   current width, and top-align the checkbox with the first line. */
.mc-pop .mc-item-label { white-space: normal !important; line-height: 1.3 !important; }
.mc-pop .mc-item { align-items: flex-start !important; }
/* A touch more room + comfortable height for the wrapped option rows. */
.mc-pop .mc-list { max-height: 320px !important; }

/* Wider filter panel on BOTH AM (Registar imovine) and IM/policy screens.
   .ar-page is the shared 3-zone grid; bump the filter column 190px -> 250px while
   preserving the collapsed (24px) and detail-drawer (400px) states. Order matters:
   the collapsed rules come after so they win when both classes are present. */
.ar-page                                         { grid-template-columns: 250px 1fr !important; }
.ar-page--detail-open                            { grid-template-columns: 250px 1fr 400px !important; }
.ar-page--filter-collapsed                       { grid-template-columns: 24px 1fr !important; }
.ar-page--filter-collapsed.ar-page--detail-open  { grid-template-columns: 24px 1fr 400px !important; }
/* Figma: upper SECTION wrapper — flex column, stretch full width, items
   start-aligned. NOTE: padding-bottom removed (was 16px). With the modal
   footer pinned to the bottom of .onfd, that bottom padding just created
   dead space between the footer and the modal's bottom edge. If we ever
   add multiple stacked sections that each need 16px breathing room,
   apply the padding INSIDE each section (e.g. on the fieldset itself)
   rather than on this outer wrapper. */
.blazored-modal-container.modal-figma-orgnode .blazored-modal-content > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
/* Figma: fieldset SECTION HEADER banner. DynForm wraps row groups in
   <fieldset class="fieldset-with-legend"><legend>{title}</legend>...</fieldset>.
   Default app.css renders the legend as position:absolute floating
   above the fieldset (legacy "outlined-form" look) and adds
   margin-top: 2.25rem to the fieldset to clear it. Both need resetting
   in our scope so legend behaves as a flush full-width banner. */
.blazored-modal-container.modal-figma-orgnode .fieldset-with-legend {
  /* Cancel default "make room for the floating legend" margin. */
  margin-top: 0;
  /* Figma "inputs area" — 2-col grid with 16/16 gaps and 8/12 padding.
     The legend banner sits in row 1 spanning both columns and breaks out
     of the padding via negative margins so it stays flush with the card
     edges. Row wrappers from DynForm (<div class="row ...">) use
     display: contents below to flatten into this grid. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-lg, 16px);
  row-gap: var(--spacing-lg, 16px);
  align-self: stretch;
  width: 100%;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  border: none;
  background: transparent;
  box-sizing: border-box;
}
.blazored-modal-container.modal-figma-orgnode .fieldset-with-legend > legend {
  /* Reset the default absolute-positioned legend. */
  position: static;
  left: auto;
  top: auto;
  /* Span the full grid (both columns) AND extend beyond the fieldset's
     8/12 padding so the banner stays flush with the card edges.
     box-sizing: border-box + width: 100% + negative margins alone
     wouldn't work — the box's WIDTH stays at 611 (grid track), and
     negative margins only shift position. So we oversize the box by
     2 * 12px = 24px and shift it back by margin-left: -12px. Visual:
     box now starts at x=0 and ends at x=635. */
  box-sizing: border-box;
  grid-column: 1 / -1;
  width: calc(100% + 2 * var(--spacing-md, 12px));
  margin: calc(-1 * var(--spacing-sm, 8px)) calc(-1 * var(--spacing-md, 12px)) 0;
  /* Figma banner layout. */
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-smd, 10px) var(--spacing-md, 12px);
  float: none;
  border-bottom: 1px solid var(--border-muted, #E0E0E0);
  background: var(--neutral-ghost, #F5F5F5);
  /* Figma typography: Inter 14 / weight 300, neutral-strong gray, uppercase. */
  color: var(--neutral-strong, #616161);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: normal;
}
/* DynForm wraps each row in <div class="row row-N row-cols-1 [row-cols-lg-2] gy-3">.
   We want the form-groups themselves to be the grid items, not the row
   wrappers — display: contents on .row makes the wrapper layout-transparent
   so its form-group children become direct grid children of the fieldset. */
.blazored-modal-container.modal-figma-orgnode .fieldset-with-legend > .row {
  display: contents;
}
/* Form-group becomes a grid item; default 1 column = ½ of the 2-col grid.
   Cancel Bootstrap's .col padding-left/right so fields align flush to the
   grid track edges. Figma per-field layout: flex column, 4px gap between
   label / input. Width comes from the grid track (~297px for our 635px
   modal). Inputs fill the column via their own width:100%.

   Anti-layout-shift: reserve a permanent 14px slot below the input for
   the validation error (10px error text + 4px gap-equivalent). The .error
   div is absolutely-positioned into that slot below — it doesn't
   participate in the flex flow, so its presence/absence cannot change the
   form-group height. position: relative makes the form-group the
   containing block for the absolute error. */
.blazored-modal-container.modal-figma-orgnode .fieldset-with-legend > .row > .form-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs, 4px);
  justify-self: start;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  /* Reserve 14px below the input for the error slot regardless of state. */
  padding-bottom: 14px;
  margin: 0;
  min-width: 0;
  width: 100%;
}
/* Rows that are single-column at all widths (just .row-cols-1, no
   .row-cols-lg-2) carry a field that should span BOTH grid columns —
   e.g. Description, Active toggle. */
.blazored-modal-container.modal-figma-orgnode .fieldset-with-legend > .row.row-cols-1:not(.row-cols-lg-2) > .form-group {
  grid-column: 1 / -1;
}
/* #28a (Imovina u grupama): the combobox wrapper (.h-combobox) has no width, so
   inside the flex-column / align-items:flex-start form-group it shrink-wraps to
   its content while the form-control text/currency inputs fill 100%. Force the
   combobox (and the Blazorise dropdown inside it) to full width so every input
   in a single-column form is the same, full, form width. */
.blazored-modal-container.modal-figma-orgnode .h-combobox,
.blazored-modal-container.modal-figma-orgnode .h-combobox > .dropdown {
  width: 100%;
}
/* Figma label: Inter 11 / weight 700, neutral-base gray (#6E6E6E). Flex
   row, NO gap — DynForm hardcodes a `:` after the @Translate output, and
   that `:` becomes an anonymous flex item separate from the <span> that
   wraps the label text. A non-zero flex `gap` would insert spacing
   between "Naziv" and ":" (rendering as "Naziv :"). gap: 0 keeps them
   tight; the asterisk gets its own margin-left below for the 4px spacing
   between the label text and the red *. */
.blazored-modal-container.modal-figma-orgnode .form-label {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  color: var(--neutral-base, #6E6E6E);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 11px;
  text-transform: none;
}
/* Red required-asterisk after every label. Figma: 14px Inter weight 700,
   status-error red (#D32F2F), 9px wide column. NOTE: this currently shows
   on ALL fields because DynForm doesn't propagate the [Required]
   attribute to the DOM — for OrgNodeFormModel 6 of 8 are required so
   this is right for the common case. To remove for optional fields,
   either swap to DynForm-emitted spans (cleaner) or scope this rule to
   specific field ids/classes. */
.blazored-modal-container.modal-figma-orgnode .form-label.required::after {
  content: "*";
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  width: 9px;
  /* Spacing between the label text (ending in ":") and the asterisk.
     Replaces the parent's removed `gap: 4px` so the colon hugs "Naziv"
     while the * still sits 4px away from it. */
  margin-left: var(--spacing-xs, 4px);
  color: var(--color-red-500, #D32F2F);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  /* Figma line-height was 12px; works at 14px font without clipping. */
  line-height: 12px;
}
/* Figma INPUT (text / number / select / textarea via Bootstrap .form-control):
   40px tall flex box, 8/8 padding (vertical reduced from Figma's 12px to
   prevent glyph clipping — see anti-clip note below), 8px gap (for
   leading icons / dropdown chevron), 4px border radius, full-width
   (align-self: stretch in the parent form-group flex column).

   Anti-clip note: Figma asked for `padding: 12px 8px` but at height: 40px
   that leaves only 16px of vertical content area. A 13px font at the
   platform's 1.4 line-height = 18.2px — taller than the 16px box — so
   descenders (g, j) and Croatian diacritics (č, š, ć, ž) clip top + bottom.
   CLAUDE.md anti-clip policy forbids dropping below line-height 1.2, so
   we deviate from Figma vertically: 8px top/bot gives 24px content area,
   comfortable for 13px/1.4 text. Horizontal padding stays 8px per Figma. */
.blazored-modal-container.modal-figma-orgnode .form-control {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-sm, 8px);
  width: 100%;
  height: 40px;
  padding: var(--spacing-sm, 8px);
  margin: 0;
  border: 1px solid var(--border-muted, #E0E0E0);
  border-radius: var(--radius-radius-md, 4px);
  background-color: var(--neutral-default, #FFFFFF);
  /* Inherit body font; size in line with the platform default. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--neutral-deep, #212121);
  box-sizing: border-box;
  /* Visually consistent native-control reset. */
  outline: none;
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.blazored-modal-container.modal-figma-orgnode .form-control:focus {
  border-color: var(--brand-strong, #3A72A8);
  box-shadow: 0 0 0 2px var(--brand-wash, #F3F7FC);
}
/* Figma placeholder: Inter 14 / weight 300, neutral-base gray (#6E6E6E).
   Figma line-height was 12px (85.7%); on a 14px font that would clip the
   glyph — but ::placeholder is single-line inside an input, so the
   container line-height controls vertical centering, not the placeholder.
   Using line-height: 1 stays safe. */
.blazored-modal-container.modal-figma-orgnode .form-control::placeholder {
  color: var(--neutral-base, #6E6E6E);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  opacity: 1; /* Some UAs (Firefox) lower opacity by default — keep full. */
}
/* Figma "helper text" — Inter 10 / weight 400 / line-height 1. DynForm
   renders this div (.error) only when a field fails validation, so it
   functions as an error message in our DOM. We apply the Figma typography
   (size/weight/family/spacing) but keep the color RED to match its
   semantic role.

   Anti-layout-shift: absolute-positioned inside the form-group's
   permanent 14px padding-bottom slot. The .error is OUT of the flex flow,
   so its presence/absence cannot affect form-group height — no shift,
   no Blazor re-render race. */
.blazored-modal-container.modal-figma-orgnode .form-group .error {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  color: var(--status-error, #D32F2F);
}
/* Field in error state — paint input border + focus ring red to match. */
.blazored-modal-container.modal-figma-orgnode .form-control.invalid,
.blazored-modal-container.modal-figma-orgnode .form-control.modified.invalid {
  border-color: var(--status-error, #D32F2F);
}
/* CHECKBOX field — flip the form-group to a row (label left, checkbox
   right) and restyle the box per Figma. DynForm wraps bool fields like:
     <div class="form-group col Custom">
       <label class="form-label">Org. jedinica je aktivna:</label>
       <div class="custom-control custom-checkbox …">
         <input class="custom-control-input" type="checkbox" />
         <label class="custom-control-label"></label>  <-- shows the box via ::before
       </div>
     </div>
   We target form-groups that CONTAIN a checkbox via :has() — modern
   browsers only (Safari 15.4+, Chrome 105+, Firefox 121+). */
.blazored-modal-container.modal-figma-orgnode .form-group:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm, 8px);
}
/* HInput's wrapper sits in normal flow — collapse its size and align the
   pseudo-element checkbox to baseline with the label. */
.blazored-modal-container.modal-figma-orgnode .form-group .custom-control {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 16px;
  padding: 0;
  margin: 0;
}
/* Hide the real <input> visually (keep it accessible). */
.blazored-modal-container.modal-figma-orgnode .form-group .custom-control-input {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
/* The visible <label> contains the box via ::before. Reset Bootstrap's
   default positioning and make it a clean 16x16 click target. */
.blazored-modal-container.modal-figma-orgnode .form-group .custom-control-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
/* Figma UNCHECKED state — 16x16 box, 4px radius, 1px solid neutral-base. */
.blazored-modal-container.modal-figma-orgnode .form-group .custom-control-label::before {
  content: "";
  position: static;
  display: flex;
  width: 16px;
  height: 16px;
  border: 1px solid var(--neutral-base, #6E6E6E);
  border-radius: var(--radius-radius-md, 4px);
  background: var(--neutral-default, #FFFFFF);
  box-shadow: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
/* Figma CHECKED state — same size, brand-base blue fill. */
.blazored-modal-container.modal-figma-orgnode .form-group .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--brand-base, #6CA5D9);
  border-color: var(--brand-base, #6CA5D9);
}
/* Checkmark glyph (white ✓) inside the checked box, via ::after. */
.blazored-modal-container.modal-figma-orgnode .form-group .custom-control-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -55%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M1.5 5L4 7.5L8.5 2.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.blazored-modal-container.modal-figma-orgnode .form-group .custom-control-input:checked ~ .custom-control-label::after {
  opacity: 1;
}
/* Focus ring on the box when the (hidden) input is keyboard-focused. */
.blazored-modal-container.modal-figma-orgnode .form-group .custom-control-input:focus-visible ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px var(--brand-wash, #F3F7FC);
}
.blazored-modal-container.modal-figma-orgnode .form-control.invalid:focus,
.blazored-modal-container.modal-figma-orgnode .form-control.modified.invalid:focus {
  border-color: var(--status-error, #D32F2F);
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.12);
}
.blazored-modal-container.modal-figma-orgnode .form-control:disabled {
  background-color: var(--neutral-ghost, #F5F5F5);
  color: var(--neutral-strong, #616161);
  cursor: not-allowed;
}
/* Textareas can't be 40px tall — let them grow vertically while keeping
   the same horizontal chrome. */
.blazored-modal-container.modal-figma-orgnode textarea.form-control {
  height: auto;
  min-height: 80px;
  align-items: flex-start;
  resize: vertical;
}
/* Native select chevron — Bootstrap's .form-select would normally add this;
   .form-control on a <select> doesn't. Add a chevron on the right so users
   know the field opens a dropdown. */
.blazored-modal-container.modal-figma-orgnode select.form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%236E6E6E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
/* DATE INPUT — DynForm wraps each [DataType.Date] field in <HDateTime>,
   which renders <section class="h-datetime"><Blazorise.DatePicker/></section>.
   Blazorise's DatePicker uses flatpickr; the actual <input> lives a few
   levels deep with intrinsic browser sizing. Make the section fill the
   column and force the inner input to match the regular .form-control look.
   `position: relative` so the calendar popup can be absolutely positioned
   directly below the input without affecting the surrounding layout. */
.blazored-modal-container.modal-figma-orgnode .h-datetime {
  position: relative;
  display: flex;
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Float the flatpickr calendar OVER other form content. Opens UPWARD
   (above the input) — the Vrijedi od/do fields sit near the bottom of
   the form, so an upward popup stays inside the viewport instead of
   extending past the modal/screen bottom edge. */
.blazored-modal-container.modal-figma-orgnode .h-datetime .flatpickr-calendar,
.blazored-modal-container.modal-figma-orgnode .h-datetime .flatpickr-calendar.static,
.blazored-modal-container.modal-figma-orgnode .h-datetime .flatpickr-calendar.static.arrowBottom,
.blazored-modal-container.modal-figma-orgnode .h-datetime .flatpickr-calendar.static.arrowTop {
  position: absolute;
  top: auto;
  bottom: 100%;
  left: 0;
  margin-top: 0;
  margin-bottom: 4px;
  z-index: 1100;
}
.blazored-modal-container.modal-figma-orgnode .h-datetime input,
.blazored-modal-container.modal-figma-orgnode .h-datetime .flatpickr-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: var(--spacing-sm, 8px);
  margin: 0;
  border: 1px solid var(--border-muted, #E0E0E0);
  border-radius: var(--radius-radius-md, 4px);
  background-color: var(--neutral-default, #FFFFFF);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--neutral-deep, #212121);
  box-sizing: border-box;
  outline: none;
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.blazored-modal-container.modal-figma-orgnode .h-datetime input:focus,
.blazored-modal-container.modal-figma-orgnode .h-datetime .flatpickr-input:focus {
  border-color: var(--brand-strong, #3A72A8);
  box-shadow: 0 0 0 2px var(--brand-wash, #F3F7FC);
}
.blazored-modal-container.modal-figma-orgnode .h-datetime input::placeholder,
.blazored-modal-container.modal-figma-orgnode .h-datetime .flatpickr-input::placeholder {
  color: var(--neutral-base, #6E6E6E);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  opacity: 1;
}
/* ── TelerikDatePicker integration (h-datetime switched flatpickr → Telerik) ──
   The rules above style `.h-datetime input`, which for Telerik is the INNER
   .k-input-inner — giving it its own border INSIDE Telerik's wrapper border.
   That double-boxes the field and makes the Telerik toggle read as a 2nd
   calendar icon. Put the figma box on the Telerik WRAPPER (.k-input) and strip
   the inner input's border so there's one box and one calendar icon. */
.blazored-modal-container.modal-figma-orgnode .h-datetime .k-datepicker,
.blazored-modal-container.modal-figma-orgnode .h-datetime .k-datetimepicker,
.blazored-modal-container.modal-figma-orgnode .h-datetime > .k-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border-muted, #E0E0E0);
  border-radius: var(--radius-radius-md, 4px);
  background-color: var(--neutral-default, #FFFFFF);
  box-shadow: none;
}
.blazored-modal-container.modal-figma-orgnode .h-datetime .k-input-inner {
  border: none;
  background: transparent;
  box-shadow: none;
  height: auto;
}
.blazored-modal-container.modal-figma-orgnode .h-datetime .k-input-button {
  border: none;
  background: transparent;
}
.blazored-modal-container.modal-page {
  position: absolute;
  top: calc(65px + 50px + 1px);
  right: 0;
  left: unset;
  bottom: 36px;
  height: calc(100vh - (65px + 50px + 36px + 1px));
  width: calc(100vw - 245px);
  display: block;
  background: #F7F6F2;
  box-shadow: inset -30px 0 30px -30px white, inset 15px 0 15px -15px rgba(0, 0, 0, 0.18), inset 0 25px 25px -25px white;
}
.blazored-modal-container.modal-page .blazored-modal-overlay {
  display: none;
}
.blazored-modal-container.modal-page .blazored-modal {
  position: relative;
  height: 100%;
  max-height: 100%;
  width: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  animation: none !important;
}
.blazored-modal-container.modal-page .blazored-modal::before {
  content: "";
  position: absolute;
  height: 12px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, 0.12), inset 0px 6px 6px -6px rgba(0, 0, 0, 0.06);
}
.blazored-modal-container.modal-page .blazored-modal-header {
  display: none;
}
.blazored-modal-container.modal-page .blazored-modal-content {
  padding: 0.75rem 0 0.75rem 0;
}

.blazored-modal-center {
  align-items: center;
  justify-content: center;
}

.blazored-modal-topleft .blazored-modal {
  position: absolute;
  top: 32px;
  left: 32px;
}

.blazored-modal-topright .blazored-modal {
  position: absolute;
  top: 32px;
  right: 32px;
}

.blazored-modal-bottomleft .blazored-modal {
  position: absolute;
  bottom: 32px;
  left: 32px;
}

.blazored-modal-bottomright .blazored-modal {
  position: absolute;
  bottom: 32px;
  right: 32px;
}

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

.blazored-modal-scrollable .blazored-modal-content {
  overflow-y: auto;
}

.blazored-modal-scrollable .blazored-modal-footer,
.blazored-modal-scrollable .blazored-modal-header {
  flex-shrink: 0;
}

.blazored-modal-content {
  padding-top: 1.5rem;
}
.blazored-modal-content .buttons {
  margin-top: 1.5rem;
}

.event-modal--telephone {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.event-modal--telephone > *:not(:last-child) {
  margin-bottom: 1.5rem;
}
.event-modal--telephone img {
  max-width: 240px;
  border-radius: 6px;
}
.event-modal--telephone .name {
  font-size: calc(1.3333333333rem + 0.9777777778vw);
  font-weight: 300;
  text-align: center;
}
@media (min-width: 1500px) {
  .event-modal--telephone .name {
    font-size: 2.25rem;
  }
}
.event-modal--telephone .telephone {
  font-size: calc(1.2552083333rem + 0.0611111111vw);
  font-weight: 700;
  text-align: center;
}
@media (min-width: 1500px) {
  .event-modal--telephone .telephone {
    font-size: 1.3125rem;
  }
}
.event-modal--telephone .call {
  font-size: calc(1.3333333333rem + 0.9777777778vw);
}
@media (min-width: 1500px) {
  .event-modal--telephone .call {
    font-size: 2.25rem;
  }
}

.blazored-toast-container {
  z-index: 108;
}

/* 
  You want a simple and fancy tooltip?
  Just copy all [data-tooltip] blocks:
*/
[data-tooltip] {
  position: relative;
  z-index: 10;
}

/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 50%;
  bottom: calc(100% + 5px); /* 5px is the size of the arrow */
  pointer-events: none;
  transition: 0.2s;
  will-change: transform;
}

/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
  content: attr(data-tooltip);
  padding: 10px 18px;
  min-width: 50px;
  max-width: 300px;
  width: max-content;
  width: -moz-max-content;
  border-radius: 6px;
  font-size: 14px;
  background-color: rgba(59, 72, 80, 0.9);
  background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44));
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  white-space: pre-wrap;
  transform: translate(-50%, -5px) scale(0.5);
}

/* Tooltip arrow */
[data-tooltip]:after {
  content: "";
  border-style: solid;
  border-width: 5px 5px 0px 5px; /* CSS triangle */
  border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
  transition-duration: 0s; /* If the mouse leaves the element, 
the transition effects for the 
tooltip arrow are "turned off" */
  transform-origin: top; /* Orientation setting for the
slide-down effect */
  transform: translateX(-50%) scaleY(0);
}

/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
  transition-delay: 0.3s;
  transform: translate(-50%, -5px) scale(1);
}

/* 
Arrow slide down effect only on mouseenter (NOT on mouseleave)
 */
[data-tooltip]:hover:after {
  transition-delay: 0.5s; /* Starting after the grow effect */
  transition-duration: 0.2s;
  transform: translateX(-50%) scaleY(1);
}

/*
That's it for the basic tooltip.

If you want some adjustability
here are some orientation settings you can use:
 */
/* LEFT */
/* Tooltip + arrow */
[data-tooltip-location=left]:before,
[data-tooltip-location=left]:after {
  left: auto;
  right: calc(100% + 5px);
  bottom: 50%;
}

/* Tooltip */
[data-tooltip-location=left]:before {
  transform: translate(-5px, 50%) scale(0.5);
}

[data-tooltip-location=left]:hover:before {
  transform: translate(-5px, 50%) scale(1);
}

/* Arrow */
[data-tooltip-location=left]:after {
  border-width: 5px 0px 5px 5px;
  border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
  transform-origin: left;
  transform: translateY(50%) scaleX(0);
}

[data-tooltip-location=left]:hover:after {
  transform: translateY(50%) scaleX(1);
}

/* RIGHT */
[data-tooltip-location=right]:before,
[data-tooltip-location=right]:after {
  left: calc(100% + 5px);
  bottom: 50%;
}

[data-tooltip-location=right]:before {
  transform: translate(5px, 50%) scale(0.5);
}

[data-tooltip-location=right]:hover:before {
  transform: translate(5px, 50%) scale(1);
}

[data-tooltip-location=right]:after {
  border-width: 5px 5px 5px 0px;
  border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
  transform-origin: right;
  transform: translateY(50%) scaleX(0);
}

[data-tooltip-location=right]:hover:after {
  transform: translateY(50%) scaleX(1);
}

/* BOTTOM */
[data-tooltip-location=bottom]:before,
[data-tooltip-location=bottom]:after {
  top: calc(100% + 5px);
  bottom: auto;
}

[data-tooltip-location=bottom]:before {
  transform: translate(-50%, 5px) scale(0.5);
}

[data-tooltip-location=bottom]:hover:before {
  transform: translate(-50%, 5px) scale(1);
}

[data-tooltip-location=bottom]:after {
  border-width: 0px 5px 5px 5px;
  border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
  transform-origin: bottom;
}

.spinner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
}

.spinner {
  width: 63px;
  height: 93px;
}
.spinner .block {
  position: relative;
  float: left;
  margin: 0 9px 9px 0;
  width: 9px;
  height: 9px;
  border-radius: 50px;
  background: #B4B5B8;
}
.spinner .block:nth-child(4n+1) {
  animation: wave 2s ease 0s infinite;
}
.spinner .block:nth-child(4n+2) {
  animation: wave 2s ease 0.2s infinite;
}
.spinner .block:nth-child(4n+3) {
  animation: wave 2s ease 0.4s infinite;
}
.spinner .block:nth-child(4n+4) {
  animation: wave 2s ease 0.6s infinite;
  margin-right: 0;
}
@keyframes wave {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 30px;
    opacity: 0.6;
    background: #EDEDEB;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

.progress-bar-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #707173;
  width: 222px;
  padding: 5px 7px;
  border-radius: 100px;
  padding-right: 63px;
}
.progress-bar-wrapper .progress-bar {
  width: auto;
  height: 18px;
  background: #FCFCFA;
  border-radius: 100px;
}
.progress-bar-wrapper .done {
  transition: background-color 0.33s ease;
  background-color: #B4B5B8;
}
.progress-bar-wrapper .count {
  position: absolute;
  right: 7px;
  bottom: 4px;
  margin-left: 0.75rem;
  font-size: 0.875rem;
  text-align: center;
  font-weight: 900;
  color: #FCFCFA;
}

form .error,
.form .error {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #FF5538;
}
form textarea,
.form textarea {
  min-height: 144px;
}

.form-check-label,
.form-label {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: #707173;
  letter-spacing: 0.027rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}
.form-group--row {
  display: flex;
  flex-direction: row;
}
.form-group--button {
  display: flex;
  margin-top: 2rem;
}

input::placeholder {
  opacity: 1;
  color: #B4B5B8;
}

.form-select--search .blazored-typeahead__input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath  fill='%239E9FA1' d='M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding: 0.313rem 3rem 0.313rem 1rem;
}

.DropdownList select,
.DropdownList input,
.Date select,
.Date input {
  display: block;
  width: 100%;
  padding: 0.313rem 3rem 0.313rem 1rem;
  -moz-padding-start: calc(1rem - 3px);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.444;
  color: #707173;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  border: 1px solid #CACCCF;
  border-radius: 3px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .DropdownList select,
  .DropdownList input,
  .Date select,
  .Date input {
    transition: none;
  }
}
.DropdownList select:focus,
.DropdownList input:focus,
.Date select:focus,
.Date input:focus {
  border-color: rgb(169.5, 155.5, 205);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}
.DropdownList select[multiple], .DropdownList select[size]:not([size="1"]),
.DropdownList input[multiple],
.DropdownList input[size]:not([size="1"]),
.Date select[multiple],
.Date select[size]:not([size="1"]),
.Date input[multiple],
.Date input[size]:not([size="1"]) {
  padding-right: 1rem;
  background-image: none;
}
.DropdownList select:disabled,
.DropdownList input:disabled,
.Date select:disabled,
.Date input:disabled {
  background-color: #F2F4F7;
  border-color: #CACCCF;
}
.DropdownList select:-moz-focusring,
.DropdownList input:-moz-focusring,
.Date select:-moz-focusring,
.Date input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #707173;
}

.DropdownList select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath  fill='%239E9FA1' d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z'/%3e%3c/svg%3e");
}
.Date input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath  fill='%239E9FA1' d='M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z'/%3e%3c/svg%3e");
  padding-right: 1rem;
}
.Date input[type=date]::-webkit-calendar-picker-indicator, .Date input::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 0;
}

.HKDM form .btn, .GDCKZG form .btn, .HORIZONT form .btn, .LUDU form .btn {
  padding: 5px 25px 3px;
  background: #9b9b9b;
  color: #fff;
  border: 0px none;
  box-shadow: none;
}
.HKDM form .btn.btn-submit, .GDCKZG form .btn.btn-submit, .HORIZONT form .btn.btn-submit, .LUDU form .btn.btn-submit {
  background: var(--brand-dark);
}
.HKDM .Date .flatpickr-day.today, .GDCKZG .Date .flatpickr-day.today, .HORIZONT .Date .flatpickr-day.today, .LUDU .Date .flatpickr-day.today {
  border-color: var(--brand-dark);
}
.HKDM .Date .flatpickr-day.today:hover, .GDCKZG .Date .flatpickr-day.today:hover, .HORIZONT .Date .flatpickr-day.today:hover, .LUDU .Date .flatpickr-day.today:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.HKDM .Date .flatpickr-day.selected, .HKDM .Date .flatpickr-day.startRange, .HKDM .Date .flatpickr-day.endRange, .HKDM .Date .flatpickr-day.selected.inRange, .HKDM .Date .flatpickr-day.startRange.inRange, .HKDM .Date .flatpickr-day.endRange.inRange, .HKDM .Date .flatpickr-day.selected:focus, .HKDM .Date .flatpickr-day.startRange:focus, .HKDM .Date .flatpickr-day.endRange:focus, .HKDM .Date .flatpickr-day.selected:hover, .HKDM .Date .flatpickr-day.startRange:hover, .HKDM .Date .flatpickr-day.endRange:hover, .HKDM .Date .flatpickr-day.selected.prevMonthDay, .HKDM .Date .flatpickr-day.startRange.prevMonthDay, .HKDM .Date .flatpickr-day.endRange.prevMonthDay, .HKDM .Date .flatpickr-day.selected.nextMonthDay, .HKDM .Date .flatpickr-day.startRange.nextMonthDay, .HKDM .Date .flatpickr-day.endRange.nextMonthDay, .GDCKZG .Date .flatpickr-day.selected, .GDCKZG .Date .flatpickr-day.startRange, .GDCKZG .Date .flatpickr-day.endRange, .GDCKZG .Date .flatpickr-day.selected.inRange, .GDCKZG .Date .flatpickr-day.startRange.inRange, .GDCKZG .Date .flatpickr-day.endRange.inRange, .GDCKZG .Date .flatpickr-day.selected:focus, .GDCKZG .Date .flatpickr-day.startRange:focus, .GDCKZG .Date .flatpickr-day.endRange:focus, .GDCKZG .Date .flatpickr-day.selected:hover, .GDCKZG .Date .flatpickr-day.startRange:hover, .GDCKZG .Date .flatpickr-day.endRange:hover, .GDCKZG .Date .flatpickr-day.selected.prevMonthDay, .GDCKZG .Date .flatpickr-day.startRange.prevMonthDay, .GDCKZG .Date .flatpickr-day.endRange.prevMonthDay, .GDCKZG .Date .flatpickr-day.selected.nextMonthDay, .GDCKZG .Date .flatpickr-day.startRange.nextMonthDay, .GDCKZG .Date .flatpickr-day.endRange.nextMonthDay, .HORIZONT .Date .flatpickr-day.selected, .HORIZONT .Date .flatpickr-day.startRange, .HORIZONT .Date .flatpickr-day.endRange, .HORIZONT .Date .flatpickr-day.selected.inRange, .HORIZONT .Date .flatpickr-day.startRange.inRange, .HORIZONT .Date .flatpickr-day.endRange.inRange, .HORIZONT .Date .flatpickr-day.selected:focus, .HORIZONT .Date .flatpickr-day.startRange:focus, .HORIZONT .Date .flatpickr-day.endRange:focus, .HORIZONT .Date .flatpickr-day.selected:hover, .HORIZONT .Date .flatpickr-day.startRange:hover, .HORIZONT .Date .flatpickr-day.endRange:hover, .HORIZONT .Date .flatpickr-day.selected.prevMonthDay, .HORIZONT .Date .flatpickr-day.startRange.prevMonthDay, .HORIZONT .Date .flatpickr-day.endRange.prevMonthDay, .HORIZONT .Date .flatpickr-day.selected.nextMonthDay, .HORIZONT .Date .flatpickr-day.startRange.nextMonthDay, .HORIZONT .Date .flatpickr-day.endRange.nextMonthDay, .LUDU .Date .flatpickr-day.selected, .LUDU .Date .flatpickr-day.startRange, .LUDU .Date .flatpickr-day.endRange, .LUDU .Date .flatpickr-day.selected.inRange, .LUDU .Date .flatpickr-day.startRange.inRange, .LUDU .Date .flatpickr-day.endRange.inRange, .LUDU .Date .flatpickr-day.selected:focus, .LUDU .Date .flatpickr-day.startRange:focus, .LUDU .Date .flatpickr-day.endRange:focus, .LUDU .Date .flatpickr-day.selected:hover, .LUDU .Date .flatpickr-day.startRange:hover, .LUDU .Date .flatpickr-day.endRange:hover, .LUDU .Date .flatpickr-day.selected.prevMonthDay, .LUDU .Date .flatpickr-day.startRange.prevMonthDay, .LUDU .Date .flatpickr-day.endRange.prevMonthDay, .LUDU .Date .flatpickr-day.selected.nextMonthDay, .LUDU .Date .flatpickr-day.startRange.nextMonthDay, .LUDU .Date .flatpickr-day.endRange.nextMonthDay {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.HKDM .DropdownList select option:checked, .HKDM .DropdownList select option:hover, .GDCKZG .DropdownList select option:checked, .GDCKZG .DropdownList select option:hover, .HORIZONT .DropdownList select option:checked, .HORIZONT .DropdownList select option:hover, .LUDU .DropdownList select option:checked, .LUDU .DropdownList select option:hover {
  background: var(--brand-dark);
  color: white;
}
.HKDM .main .filter, .GDCKZG .main .filter, .HORIZONT .main .filter, .LUDU .main .filter {
  margin: -12px;
}
.HKDM .main .hori-data-export, .HKDM .blazored-modal .hori-data-export, .GDCKZG .main .hori-data-export, .GDCKZG .blazored-modal .hori-data-export, .HORIZONT .main .hori-data-export, .HORIZONT .blazored-modal .hori-data-export, .LUDU .main .hori-data-export, .LUDU .blazored-modal .hori-data-export {
  margin-right: -4px;
}
.HKDM .main .hori-data-export button, .HKDM .blazored-modal .hori-data-export button, .GDCKZG .main .hori-data-export button, .GDCKZG .blazored-modal .hori-data-export button, .HORIZONT .main .hori-data-export button, .HORIZONT .blazored-modal .hori-data-export button, .LUDU .main .hori-data-export button, .LUDU .blazored-modal .hori-data-export button {
  background: #fff;
  background: #ffffff;
  padding: 5px 15px 0px 15px;
  border: 1px solid #9b9b9b;
}
.HKDM .main .filter .buttons-holder, .HKDM .blazored-modal .filter .buttons-holder, .GDCKZG .main .filter .buttons-holder, .GDCKZG .blazored-modal .filter .buttons-holder, .HORIZONT .main .filter .buttons-holder, .HORIZONT .blazored-modal .filter .buttons-holder, .LUDU .main .filter .buttons-holder, .LUDU .blazored-modal .filter .buttons-holder {
  position: relative;
  text-align: right;
  top: -4.95rem;
  right: -10px;
}
.HKDM legend, .GDCKZG legend, .HORIZONT legend, .LUDU legend {
  color: #757577;
}
.HKDM .filter fieldset, .GDCKZG .filter fieldset, .HORIZONT .filter fieldset, .LUDU .filter fieldset {
  background-color: rgba(24, 24, 24, 0.1411764706);
  padding: 0.75rem 0.75rem 3.75rem 0.75rem;
}

/*.HKDM .Date {
    .flatpickr-day.today {
        border-color: var(--brand-dark);
    }

    .flatpickr-day.today:hover {
        background: var(--brand-dark);
        border-color: var(--brand-dark);
    }

    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
        background: var(--brand-dark);
        border-color: var(--brand-dark);
    }
}

.HKDM .DropdownList {
    select option:checked, select option:hover {
        background: var(--brand-dark);
        color: white;
    }
}*/
/*.HKDM.main .hori-data-export, .HKDM .blazored-modal .hori-data-export {
    margin-right: -4px;

    button {
        background: #fff;
        background: #ffffff;
        padding: 5px 15px 0px 15px;
        border: 1px solid #9b9b9b;
    }
}

.HKDM.main .filter .buttons-holder, .HKDM .blazored-modal .filter .buttons-holder {
    position: relative;
    text-align: right;
    top: calc(-2.25rem* 2.2);
    right: -10px;
}*/
/*.LUDU {
    form{ 
        .btn {
            padding: 5px 25px 3px;
            background: #9b9b9b;
            color: #fff;
            border: 0px none;
            box-shadow: none;
        }

        .btn.btn-submit {
            background: var(--brand-dark);
        }
    }
}*/
.buttons-holder {
  margin-top: 1.5rem;
}
.buttons-holder button {
  margin-right: 1.5rem;
}

.filter form {
  position: relative;
}
.filter form .buttons-holder {
  position: absolute;
  top: calc(-2.25rem * 1.5);
  right: 0;
}

fieldset {
  position: relative;
  padding: 0.75rem;
  background-color: #EDEDEB;
  margin-bottom: 1.5rem;
  border-radius: 3px;
}

.fieldset-with-legend {
  margin-top: 2.25rem;
}

legend {
  position: absolute;
  left: 0.75rem;
  top: -2.25rem;
  margin-bottom: 0;
  font-size: calc(1.2708333333rem + 0.2444444444vw);
  color: #707173;
  font-weight: 300;
  text-transform: uppercase;
}
@media (min-width: 1500px) {
  legend {
    font-size: 1.5rem;
  }
}

/*.HKDM {
    legend {
        color: #757577;
    }

    .filter fieldset {
        background-color: #18181824;
        padding: 0.75rem 0.75rem 3.75rem 0.75rem;
    }
}*/
.form-control:focus[readonly] {
  outline: 0;
  box-shadow: none;
  border-color: #CACCCF;
}

.blazored-typeahead {
  border: none;
  border-radius: 0;
}
.blazored-typeahead:focus-within {
  box-shadow: none;
}
.blazored-typeahead__input {
  display: block;
  width: 100%;
  padding: 0.313rem 1rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.444;
  color: #707173;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #CACCCF;
  appearance: none;
  border-radius: 3px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .blazored-typeahead__input {
    transition: none;
  }
}
.blazored-typeahead__input[type=file] {
  overflow: hidden;
}
.blazored-typeahead__input[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.blazored-typeahead__input:focus {
  color: #707173;
  background-color: #fff;
  border-color: rgb(169.5, 155.5, 205);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}
.blazored-typeahead__input::-webkit-date-and-time-value {
  height: 1.444em;
}
.blazored-typeahead__input::placeholder {
  color: #6c757d;
  opacity: 1;
}
.blazored-typeahead__input:disabled, .blazored-typeahead__input[readonly] {
  background-color: #F2F4F7;
  border-color: #CACCCF;
  opacity: 1;
}
.blazored-typeahead__input::file-selector-button {
  padding: 0.313rem 1rem;
  margin: -0.313rem -1rem;
  margin-inline-end: 1rem;
  color: #707173;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  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) {
  .blazored-typeahead__input::file-selector-button {
    transition: none;
  }
}
.blazored-typeahead__input:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: rgb(221.35, 224.2, 227.05);
}
.blazored-typeahead__input::-webkit-file-upload-button {
  padding: 0.313rem 1rem;
  margin: -0.313rem -1rem;
  margin-inline-end: 1rem;
  color: #707173;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  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) {
  .blazored-typeahead__input::-webkit-file-upload-button {
    transition: none;
  }
}
.blazored-typeahead__input:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: rgb(221.35, 224.2, 227.05);
}

.ComboBoxMS .h-combobox .b-is-autocomplete.b-is-autocomplete-multipleselection {
  padding: 0rem 0.7rem;
  min-height: calc(1.5em + 0.75rem + 0px);
}

.ComboBoxMS .b-is-autocomplete.b-is-autocomplete-multipleselection.focus {
  border-color: rgb(169.5, 155.5, 205);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(84, 56, 155, 0.25);
}

.ComboBoxMS .h-combobox .dropdown-menu {
  left: 0px;
}

.ComboBoxMS .badge {
  border-radius: 3px;
  background: var(--brand-dark);
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 5px;
  margin-right: 5px;
}

.Date .h-datetime .flatpickr-wrapper {
  position: relative;
  display: contents;
}

.Date .h-datetime .flatpickr-calendar.static {
  position: absolute;
  top: auto;
}

.Date .h-datetime .flatpickr-calendar.static.arrowBottom {
  top: auto;
  bottom: auto;
  margin-top: -400px;
}

.table-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.HKDM .table-title {
  color: #757577;
}

.table-fixed-header {
  border: 1px solid #CACCCF;
  border-radius: 3px;
}

.table,
.table-fixed-header > .table {
  margin-bottom: 0%;
}
.table.table-striped > tbody > tr.table-primary,
.table-fixed-header > .table.table-striped > tbody > tr.table-primary {
  --bs-table-striped-bg: var(--brand-selected);
}
.table.table-striped > tbody > tr.table-primary > *,
.table-fixed-header > .table.table-striped > tbody > tr.table-primary > * {
  background-color: var(--brand-selected);
}
.table thead,
.table-fixed-header > .table thead {
  position: sticky;
  z-index: 9;
}
.table thead tr th,
.table-fixed-header > .table thead tr th {
  background-color: #4B4C4D;
  color: #CACCCF;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 1.5rem;
}
.table thead tr th:not(:last-child)::after,
.table-fixed-header > .table thead tr th:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  background-color: #707173;
}
.table thead tr th > [class*=sort],
.table-fixed-header > .table thead tr th > [class*=sort] {
  position: absolute;
  right: 7px;
  transition: none;
  color: #9E9FA1;
}
.table thead tr th > [class*=sort-down],
.table-fixed-header > .table thead tr th > [class*=sort-down] {
  top: 6px;
}
.table thead tr th > [class*=sort-up],
.table-fixed-header > .table thead tr th > [class*=sort-up] {
  top: 12px;
}
.table thead tr th.sort .activate-sort ~ label,
.table-fixed-header > .table thead tr th.sort .activate-sort ~ label {
  position: relative;
  caret-color: transparent;
  cursor: pointer;
  padding-right: 1.5rem;
  /* Set the default opacity levels and colors for each layer */
  /* Reference Individual Icon's Layers */
}
.table thead tr th.sort .activate-sort ~ label::after, .table thead tr th.sort .activate-sort ~ label::before,
.table-fixed-header > .table thead tr th.sort .activate-sort ~ label::after,
.table-fixed-header > .table thead tr th.sort .activate-sort ~ label::before {
  font-family: "Font Awesome 5 Duotone";
  font-weight: 900;
  font-size: 1rem;
  /* position both layers of the icon to the left, set our fixed-width width, horizontally center layers, and then vertically align them so they flex with different line heights */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  text-align: center;
}
.table thead tr th.sort .activate-sort ~ label::before,
.table-fixed-header > .table thead tr th.sort .activate-sort ~ label::before {
  opacity: 1;
}
.table thead tr th.sort .activate-sort ~ label::after,
.table-fixed-header > .table thead tr th.sort .activate-sort ~ label::after {
  opacity: 0.3;
}
.table thead tr th.sort .activate-sort ~ label::before,
.table-fixed-header > .table thead tr th.sort .activate-sort ~ label::before {
  content: "\f0de";
}
.table thead tr th.sort .activate-sort ~ label::after,
.table-fixed-header > .table thead tr th.sort .activate-sort ~ label::after {
  content: "\10f0de";
}
.table thead tr th.sort .activate-sort:checked ~ label,
.table-fixed-header > .table thead tr th.sort .activate-sort:checked ~ label {
  color: var(--brand-light);
  /* Reference Individual Icon's Layers */
}
.table thead tr th.sort .activate-sort:checked ~ label::before,
.table-fixed-header > .table thead tr th.sort .activate-sort:checked ~ label::before {
  content: "\10f0de";
}
.table thead tr th.sort .activate-sort:checked ~ label::after,
.table-fixed-header > .table thead tr th.sort .activate-sort:checked ~ label::after {
  content: "\f0de";
}
.table tbody,
.table-fixed-header > .table tbody {
  width: 100%;
}
.table tbody td,
.table-fixed-header > .table tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.23;
  background-color: #fff;
}
@media (min-width: 1500px) {
  .table tbody td,
  .table-fixed-header > .table tbody td {
    font-size: 1rem;
  }
}
.table tbody td .buttons,
.table-fixed-header > .table tbody td .buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}
.table tbody td .buttons > *:not(:last-child),
.table-fixed-header > .table tbody td .buttons > *:not(:last-child) {
  margin-right: 0.75rem;
}

.pagination {
  margin-bottom: 0;
  margin-top: 0.75rem;
}
.pagination .page-item .page-link {
  font-size: 0.9375rem;
  background-color: #FCFCFA;
}
.pagination .page-item .page-link:hover {
  background-color: #EDEDEB;
}

.b-table.table tr {
  position: relative;
}
.b-table.table tr .table-context-menu-holder {
  width: 0;
  padding: 0;
  margin: 0;
}
.b-table.table tr .table-context-menu-holder .table-context-menu-right-click {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.b-table.table tr .table-context-menu-holder .table-context-menu-both-click {
  position: relative;
  height: 100%;
}
.b-table.table tr .table-context-menu-holder .btn {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-shadow: none;
  line-height: 1;
}
.b-table.table tr .table-context-menu-holder .btn i {
  font-size: 1.875rem;
}
.b-table.table tr .table-context-menu-holder .btn:focus, .b-table.table tr .table-context-menu-holder .btn:hover {
  background-color: var(--brand-light);
}
.b-table.table .b-table-resizer:hover,
.b-table.table .b-table-resizing {
  border-right: 3px solid var(--brand-light);
}

.nav-tabs {
  border-bottom: none;
}
.nav-tabs .nav-item:not(:last-child) {
  margin-right: 5px;
}
.nav-tabs .nav-item .nav-link {
  border-radius: 12px 12px 0 0;
  color: #707173;
  font-weight: 500;
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  transform: translateY(0);
  background-image: linear-gradient(#fcfcfa 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid transparent;
  border-color: #E6E8EB #E6E8EB #fff;
  border-bottom: none;
}
.nav-tabs .nav-item .nav-link:hover {
  transform: translateY(1px);
  border-color: #CACCCF #CACCCF #fff;
  background-color: white;
  color: #2D2D2E;
}
.nav-tabs .nav-item .nav-link.active {
  transform: translateY(1px);
  cursor: default;
  border-color: #CACCCF #CACCCF #fff;
  background-image: linear-gradient(#fcfcfa 0%, white 100%);
  color: var(--brand-dark);
}
.tab-content .tab-pane {
  background: white;
  border: 1px solid #CACCCF;
  border-radius: 0 12px 12px 12px;
  padding: 0.75rem;
  box-shadow: 0 -12px 12px -12px rgba(0, 0, 0, 0.1);
}

.blazor-context-menu--default {
  position: fixed;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px #eee;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px #eee;
  padding: 5px 0;
}

.blazor-context-menu__list {
  list-style-type: none;
  padding-left: 5px;
  padding-right: 5px;
  margin: 0;
}

.blazor-context-menu__seperator {
  min-width: 120px;
  color: #333;
  position: relative;
}

.blazor-context-menu__seperator__hr {
  display: block;
  border-style: inset;
  border-width: 1px;
  margin: 0.5em auto;
  margin: 0.5em auto;
}

.blazor-context-menu__item--default {
  min-width: 120px;
  padding: 6px;
  text-align: left;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}

.blazor-context-menu__item--default:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.blazor-context-menu__item--with-submenu:after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #615c5c;
}

.blazor-context-menu--hidden {
  display: none;
}

.blazor-context-menu__animations--fadeIn {
  animation-name: fadeIn;
  animation-direction: reverse;
  animation-duration: 0.2s;
}

.blazor-context-menu__animations--fadeIn-shown {
  animation-name: fadeIn;
  animation-duration: 0.2s;
}

.blazor-context-menu__animations--grow,
.blazor-context-menu__animations--grow-shown {
  animation-name: grow;
  animation-duration: 0.2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.blazor-context-menu__animations--grow {
  animation-direction: reverse;
}

@keyframes grow {
  0% {
    transform: scale(0);
    transform-origin: top left;
    opacity: 0;
  }
  100% {
    transform: scale(1);
    transform-origin: top left;
    opacity: 1;
  }
}
.blazor-context-menu.blazor-context-menu__animations--slide {
  animation-name: slide;
  animation-direction: reverse;
  animation-duration: 0.2s;
}

.blazor-context-menu.blazor-context-menu__animations--slide-shown {
  animation-name: slide;
  animation-duration: 0.2s;
}

@keyframes slide {
  0% {
    transform: translateX(-5px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.blazor-context-submenu.blazor-context-menu__animations--slide {
  animation-name: slide-submenu;
  animation-direction: reverse;
  animation-duration: 0.2s;
}

.blazor-context-submenu.blazor-context-menu__animations--slide-shown {
  animation-name: slide-submenu;
  animation-duration: 0.2s;
}

.blazor-context-menu__animations--zoom,
.blazor-context-menu__animations--zoom-shown {
  animation-name: zoom;
  animation-duration: 0.2s;
}

@keyframes slide-submenu {
  0% {
    transform: translateX(-25px);
    z-index: -1;
    opacity: 0;
  }
  90% {
    z-index: -1;
  }
  100% {
    transform: translateX(0);
    z-index: unset;
    opacity: 1;
  }
}
.blazor-context-menu__animations--zoom {
  animation-direction: reverse;
}

@keyframes zoom {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.blazor-context-menu__animations--fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.2s;
}

.blazor-context-menu__animations--fadeIn-shown {
  animation-name: fadeIn;
  animation-duration: 0.2s;
}

.blazor-context-menu__animations--grow,
.blazor-context-menu__animations--grow-shown {
  animation-name: grow;
  animation-duration: 0.2s;
}

.blazor-context-menu.blazor-context-menu__animations--slide {
  animation-name: slide;
  animation-duration: 0.2s;
}

.blazor-context-menu.blazor-context-menu__animations--slide-shown {
  animation-name: slide;
  animation-duration: 0.2s;
}

.blazor-context-submenu.blazor-context-menu__animations--slide {
  animation-name: slide-submenu;
  animation-duration: 0.2s;
}

.blazor-context-submenu.blazor-context-menu__animations--slide-shown {
  animation-name: slide-submenu;
  animation-duration: 0.2s;
}

.blazor-context-menu__animations--zoom,
.blazor-context-menu__animations--zoom-shown {
  animation-name: zoom;
  animation-duration: 0.2s;
}

.blazor-context-menu--default {
  z-index: 999;
  border-radius: 0 6px 6px 6px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  padding: 0;
  border: 6px solid #F2F4F7;
}
.blazor-context-menu--default .blazor-context-menu__list {
  padding: 0;
}
.blazor-context-menu--default .blazor-context-menu__item--default,
.blazor-context-menu--default .blazor-context-menu__item--default-disabled {
  font-size: 1rem;
  font-weight: 400;
  color: #707173;
  padding: 10px 15px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.blazor-context-menu--default .blazor-context-menu__item--default:not(:last-child),
.blazor-context-menu--default .blazor-context-menu__item--default-disabled:not(:last-child) {
  border-bottom: 1px solid #F2F4F7;
}
.blazor-context-menu--default .blazor-context-menu__item--default:not(:first-child),
.blazor-context-menu--default .blazor-context-menu__item--default-disabled:not(:first-child) {
  border-top: 1px solid #E6E8EB;
}
.blazor-context-menu--default .blazor-context-menu__item--default label,
.blazor-context-menu--default .blazor-context-menu__item--default-disabled label {
  margin-bottom: 0;
  cursor: pointer;
}
.blazor-context-menu--default .blazor-context-menu__item--default i,
.blazor-context-menu--default .blazor-context-menu__item--default-disabled i {
  color: #9E9FA1;
  margin-right: 10px;
  min-width: 25px;
}
.blazor-context-menu--default .blazor-context-menu__item--default:hover,
.blazor-context-menu--default .blazor-context-menu__item--default-disabled:hover {
  background-color: #F2F4F7;
  color: var(--brand-dark);
}
.blazor-context-menu--default .blazor-context-menu__item--default label,
.blazor-context-menu--default .blazor-context-menu__item--default span,
.blazor-context-menu--default .blazor-context-menu__item--default-disabled label,
.blazor-context-menu--default .blazor-context-menu__item--default-disabled span {
  width: 100%;
}
.blazor-context-menu--default .blazor-context-menu__item--default span,
.blazor-context-menu--default .blazor-context-menu__item--default-disabled span {
  display: block;
}
.blazor-context-menu--default .blazor-context-menu__item--default-disabled {
  cursor: not-allowed;
  opacity: 0.36;
}
.blazor-context-menu--default .blazor-context-menu__item--default-disabled:hover {
  background-color: unset;
  color: unset;
}

.blazor-context-menu--default .e-upload.e-control-wrapper,
.blazor-context-menu--default .e-bigger.e-small .e-upload.e-control-wrapper {
  visibility: hidden;
  content-visibility: hidden;
  display: none;
}

.onUpload {
  height: 25px;
}

.action-bar {
  margin-top: -0.75rem;
}
.action-bar .nav-item {
  flex: 1;
  display: flex;
  max-width: 81px;
}
.action-bar .nav-item .nav-link {
  flex: 1;
  display: flex;
  justify-content: center;
  font-size: calc(1.2864583333rem + 0.4277777778vw);
  color: #9E9FA1;
  padding: 0.75rem;
  border-left: 1px solid #E6E8EB;
  border-bottom: 1px solid transparent;
}
@media (min-width: 1500px) {
  .action-bar .nav-item .nav-link {
    font-size: 1.6875rem;
  }
}
.action-bar .nav-item .nav-link .fa-stack-crm-sync-inquiry {
  height: calc(1.28646rem + 0.42778vw);
  width: calc(1.28646rem + 0.42778vw);
  line-height: 1;
}
.action-bar .nav-item .nav-link .fa-stack-crm-sync-inquiry > *:last-child {
  font-size: 0.875rem;
  top: 0.25rem;
  left: 0.18rem;
}
.action-bar .nav-item .nav-link:hover {
  color: var(--brand-dark);
  background-color: #FCFCFA;
  border-bottom-color: #EDEDEB;
}
.action-bar .nav-item:last-child > * {
  border-right: 1px solid #E6E8EB;
}

.login {
  display: flex;
  flex: 1;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to top, rgba(var(--brand-dark), 1), rgba(var(--brand-light), 1));
  background-color: #EDEDEB;
}
.login .LoginDesc {
  display: none;
}
.login label {
  color: rgba(0, 0, 0, 0.45);
}
@media (min-width: 768px) {
  .login label {
    color: #FCFCFA;
    font-weight: 300;
  }
}
.login .form-group--button {
  justify-content: center;
}
@media (min-width: 768px) {
  .login .form-group--button {
    justify-content: initial;
  }
}
.login__left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login__left form {
  width: 300px;
}
.login__left .title {
  font-size: 3.938rem;
  font-weight: 100;
  margin-bottom: 9vh;
}
.login__left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
@media (min-width: 768px) {
  .login__left::after {
    border-right: 1px solid #54389b;
  }
}
.login__right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login__right .symbol {
  margin-bottom: 36px;
  max-width: 150px;
}
@media (min-width: 576px) {
  .login__right .symbol {
    display: initial;
    max-width: 210px;
  }
}
@media (min-width: 768px) {
  .login__right .symbol {
    max-width: 300px;
    max-height: 250px;
  }
}
.login__right .logo {
  max-height: 50px;
  margin-bottom: 45px;
}
@media (min-width: 576px) {
  .login__right .logo {
    display: initial;
    margin-bottom: calc(6vh + 1vw);
  }
}
.login__right .horizont-fullname {
  color: rgba(0, 0, 0, 0.36);
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
}
.login__right .horizont-fullname span {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.54);
}
.login__right, .login__left {
  padding: 3vw;
}
@media (min-width: 768px) {
  .login__right, .login__left {
    padding: 6vw;
  }
}

.login-client {
  margin: auto;
  max-width: 500px;
  width: 100%;
  background: url("assets/images/background.jpg") no-repeat top center;
}
.login-client .card {
  background-color: transparent;
  border: none 0px transparent;
}
.login-client .card .logo {
  width: 200px;
  margin: auto;
  display: block;
}
.login-client .card label {
  display: none;
}
.login-client .card h4, .login-client .card .h4, .login-client .card h6, .login-client .card .h6 {
  text-align: center;
}
.login-client .card h4, .login-client .card .h4 {
  padding: 30px 0px 10px 0px;
  font-size: 2.5rem;
}
.login-client .card h6, .login-client .card .h6 {
  padding: 0 0 30px 0;
  font-weight: normal;
}
.login-client .card .btn-sm {
  width: 100%;
  height: 60px;
  border-radius: 5px 5px;
  box-shadow: none;
  background: #d20004;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1rem;
}
.login-client .card .form-group {
  margin-bottom: 0.6rem;
}
.login-client::before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: #555;
  top: 0;
  left: 0;
  background: url(../assets/images/background.jpg) no-repeat center center;
}

.app .HKDM.login, .app .LUDU.login, .app .GDCKZG.login, .app .HORIZONT.login {
  margin: auto;
  max-width: 500px;
  width: 100%;
}
.app .HKDM.login .card, .app .LUDU.login .card, .app .GDCKZG.login .card, .app .HORIZONT.login .card {
  background-color: transparent;
  border: none 0px transparent;
}
.app .HKDM.login .LoginDesc, .app .LUDU.login .LoginDesc, .app .GDCKZG.login .LoginDesc, .app .HORIZONT.login .LoginDesc {
  display: block;
  z-index: 9;
}
.app .HKDM.login .LoginDesc .logo, .app .LUDU.login .LoginDesc .logo, .app .GDCKZG.login .LoginDesc .logo, .app .HORIZONT.login .LoginDesc .logo {
  width: 200px;
  height: 80px;
  margin: auto;
  display: block;
  z-index: 9;
  background: url("../assets/images/logo.png") no-repeat top center;
}
.app .HKDM.login label, .app .LUDU.login label, .app .GDCKZG.login label, .app .HORIZONT.login label {
  display: none;
}
.app .HKDM.login input, .app .LUDU.login input, .app .GDCKZG.login input, .app .HORIZONT.login input {
  color: #a0a0a0;
}
.app .HKDM.login input::placeholder, .app .LUDU.login input::placeholder, .app .GDCKZG.login input::placeholder, .app .HORIZONT.login input::placeholder {
  color: #a0a0a0;
  font-size: small;
}
.app .HKDM.login input::-ms-input-placeholder, .app .LUDU.login input::-ms-input-placeholder, .app .GDCKZG.login input::-ms-input-placeholder, .app .HORIZONT.login input::-ms-input-placeholder { /* Edge 12 -18 */
  color: #a0a0a0;
  font-size: small;
}
.app .HKDM.login .LoginDesc, .app .LUDU.login .LoginDesc, .app .GDCKZG.login .LoginDesc, .app .HORIZONT.login .LoginDesc {
  margin-bottom: 10px;
}
.app .HKDM.login .LoginDesc h4, .app .HKDM.login .LoginDesc .h4, .app .HKDM.login .LoginDesc h6, .app .HKDM.login .LoginDesc .h6, .app .LUDU.login .LoginDesc h4, .app .LUDU.login .LoginDesc .h4, .app .LUDU.login .LoginDesc h6, .app .LUDU.login .LoginDesc .h6, .app .GDCKZG.login .LoginDesc h4, .app .GDCKZG.login .LoginDesc .h4, .app .GDCKZG.login .LoginDesc h6, .app .GDCKZG.login .LoginDesc .h6, .app .HORIZONT.login .LoginDesc h4, .app .HORIZONT.login .LoginDesc .h4, .app .HORIZONT.login .LoginDesc h6, .app .HORIZONT.login .LoginDesc .h6 {
  text-align: center;
  color: #7b7c7f;
}
.app .HKDM.login .LoginDesc h4, .app .HKDM.login .LoginDesc .h4, .app .LUDU.login .LoginDesc h4, .app .LUDU.login .LoginDesc .h4, .app .GDCKZG.login .LoginDesc h4, .app .GDCKZG.login .LoginDesc .h4, .app .HORIZONT.login .LoginDesc h4, .app .HORIZONT.login .LoginDesc .h4 {
  padding: 25px 0px 0px 0px;
  margin-bottom: 0px;
  font-size: 2.5rem;
}
.app .HKDM.login .LoginDesc h6, .app .HKDM.login .LoginDesc .h6, .app .LUDU.login .LoginDesc h6, .app .LUDU.login .LoginDesc .h6, .app .GDCKZG.login .LoginDesc h6, .app .GDCKZG.login .LoginDesc .h6, .app .HORIZONT.login .LoginDesc h6, .app .HORIZONT.login .LoginDesc .h6 {
  padding: 0 0 30px 0;
  font-weight: normal;
  font-size: x-large;
}
.app .HKDM.login .form-group--button, .app .LUDU.login .form-group--button, .app .GDCKZG.login .form-group--button, .app .HORIZONT.login .form-group--button {
  margin-top: 1rem;
}
.app .HKDM.login .btn-brand-light, .app .LUDU.login .btn-brand-light, .app .GDCKZG.login .btn-brand-light, .app .HORIZONT.login .btn-brand-light {
  width: 100%;
  height: 50px;
  border-radius: 5px 5px;
  box-shadow: none;
  background: var(--brand-dark);
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1rem;
}
.app .HKDM.login .form-group, .app .LUDU.login .form-group, .app .GDCKZG.login .form-group, .app .HORIZONT.login .form-group {
  margin-bottom: 2px;
  margin-top: 8px;
}
.app .HKDM.login .email::before, .app .LUDU.login .email::before, .app .GDCKZG.login .email::before, .app .HORIZONT.login .email::before {
  width: 39px;
  height: 40px;
  content: "";
  position: absolute;
  background: url(../assets/images/Email.jpg) no-repeat center center;
  background-size: 20px;
}
.app .HKDM.login .pass::before, .app .LUDU.login .pass::before, .app .GDCKZG.login .pass::before, .app .HORIZONT.login .pass::before {
  width: 36px;
  height: 40px;
  content: "";
  position: absolute;
  background: url(../assets/images/Pass.jpg) no-repeat center center;
  background-size: 20px;
}
.app .HKDM.login .form-control.email, .app .LUDU.login .form-control.email, .app .GDCKZG.login .form-control.email, .app .HORIZONT.login .form-control.email {
  background: #f6f6f6;
  font-size: small;
  padding: 0.613rem 1rem;
  padding-left: 45px;
}
.app .HKDM.login .form-control.pass, .app .LUDU.login .form-control.pass, .app .GDCKZG.login .form-control.pass, .app .HORIZONT.login .form-control.pass {
  background: #f6f6f6;
  font-size: small;
  padding: 0.613rem 1rem;
  padding-left: 45px;
}
.app .HKDM.login::before, .app .LUDU.login::before, .app .GDCKZG.login::before, .app .HORIZONT.login::before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: #555;
  top: 0;
  left: 0;
  background: url(../assets/images/Registar-background.jpg) repeat center center;
}
.app .HKDM.login .login__right, .app .LUDU.login .login__right, .app .GDCKZG.login .login__right, .app .HORIZONT.login .login__right {
  display: none;
}
.app .HKDM.login .login__left, .app .LUDU.login .login__left, .app .GDCKZG.login .login__left, .app .HORIZONT.login .login__left {
  padding-top: 0px;
}
.app .HKDM.login .login__left::after, .app .LUDU.login .login__left::after, .app .GDCKZG.login .login__left::after, .app .HORIZONT.login .login__left::after {
  border-right: 0px solid transparent;
}

/*.app.LUDU .login {
    .LoginDesc .logo {
        width: 340px;
        height: 340px;
        margin: auto;
        display: block;
        z-index: 9;
        background: url("../assets/images/LUKA-DUBROVNIK_logo.png") no-repeat center center;
        background-size: 77%;
    }
}*/
.app .GDCKZG.login, .app .HORIZONT.login, .app .LUDU.login {
  margin: auto;
  max-width: 300px;
  width: 100%;
}
.app .GDCKZG.login input::placeholder, .app .HORIZONT.login input::placeholder, .app .LUDU.login input::placeholder {
  color: #a0a0a0;
  font-size: 15px;
}
.app .GDCKZG.login input::-ms-input-placeholder, .app .HORIZONT.login input::-ms-input-placeholder, .app .LUDU.login input::-ms-input-placeholder { /* Edge 12 -18 */
  color: #a0a0a0;
  font-size: 15px;
}
.app .GDCKZG.login .LoginDesc .logo, .app .HORIZONT.login .LoginDesc .logo, .app .LUDU.login .LoginDesc .logo {
  width: 270px;
  height: 120px;
  margin: auto;
  margin-bottom: 50px;
  display: block;
  z-index: 9;
  background: url(../assets/images/horizont-logo.png) no-repeat center center;
  background-size: 72%;
}
.app .GDCKZG.login .LoginDesc h4, .app .GDCKZG.login .LoginDesc .h4, .app .GDCKZG.login .LoginDesc h6, .app .GDCKZG.login .LoginDesc .h6, .app .HORIZONT.login .LoginDesc h4, .app .HORIZONT.login .LoginDesc .h4, .app .HORIZONT.login .LoginDesc h6, .app .HORIZONT.login .LoginDesc .h6, .app .LUDU.login .LoginDesc h4, .app .LUDU.login .LoginDesc .h4, .app .LUDU.login .LoginDesc h6, .app .LUDU.login .LoginDesc .h6 {
  display: none;
}
.app .GDCKZG.login .login__left, .app .HORIZONT.login .login__left, .app .LUDU.login .login__left {
  padding: 20px;
}
.app .GDCKZG.login .form-control.email, .app .HORIZONT.login .form-control.email, .app .LUDU.login .form-control.email {
  background: #fff;
  font-size: 15px;
  padding: 0.813rem 1rem;
  padding-left: 55px;
  border-radius: 11px;
}
.app .GDCKZG.login .form-control.pass, .app .HORIZONT.login .form-control.pass, .app .LUDU.login .form-control.pass {
  background: #fff;
  font-size: 15px;
  padding: 0.813rem 1rem;
  padding-left: 55px;
  border-radius: 11px;
}
.app .GDCKZG.login .btn-brand-light, .app .HORIZONT.login .btn-brand-light, .app .LUDU.login .btn-brand-light {
  width: 100%;
  height: 50px;
  border-radius: 11px 11px;
  box-shadow: none;
  background: var(--brand-dark);
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1rem;
}
.app .GDCKZG.login > div, .app .HORIZONT.login > div, .app .LUDU.login > div {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #bdcddb;
  position: relative;
  border-radius: 11px;
}
.app .GDCKZG.login::before, .app .HORIZONT.login::before, .app .LUDU.login::before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: #555;
  top: 0;
  left: 0;
  background: url(../assets/images/horizont-landingpage-bez-loga.jpg) repeat center center;
}

.app .GDCKZG.login .email::before, .app .HORIZONT.login .email::before {
  width: 50px;
  height: 47px;
  content: "";
  position: absolute;
  background: url(../assets/images/user-icon.png) no-repeat center center;
  background-size: 20px;
}
.app .GDCKZG.login .pass::before, .app .HORIZONT.login .pass::before {
  width: 50px;
  height: 47px;
  content: "";
  position: absolute;
  background: url(../assets/images/lock-icon.png) no-repeat center center;
  background-size: 20px;
}

.app.GDCKZG .login .LoginDesc .logo {
  width: 270px;
  height: 120px;
  margin: auto;
  margin-bottom: 50px;
  display: block;
  z-index: 9;
  background: url(../assets/images/gckzg-logo.png) no-repeat center center;
  background-size: 72%;
}

.app.LUDU .login .LoginDesc .logo {
  width: 270px;
  height: 270px;
  margin: auto;
  display: block;
  z-index: 9;
  background: url("../assets/images/LUKA-DUBROVNIK_logo.png") no-repeat center center;
  background-size: 77%;
}

.nav-platform {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.nav-platform .scroll {
  background-color: #F7F6F2;
  height: 100vh;
  max-height: 100vh;
  overflow: auto;
}
.nav-platform .top-bar {
  height: 54px;
  background-color: #EDEDEB;
}
.nav-platform .top-bar .title {
  display: flex;
  align-items: center;
  background-color: #F7F6F2;
  padding-right: 2rem;
  border-radius: 0 12px 0 0;
}
.nav-platform .top-bar .title h1, .nav-platform .top-bar .title .h1 {
  font-size: calc(1.2708333333rem + 0.2444444444vw);
  font-weight: 100;
  color: #707173;
  margin-bottom: 0;
}
@media (min-width: 1500px) {
  .nav-platform .top-bar .title h1, .nav-platform .top-bar .title .h1 {
    font-size: 1.5rem;
  }
}
.nav-platform .top-bar .nav-modules {
  display: flex;
  flex: 1;
  padding-left: 30px;
}
.nav-platform .top-bar .nav-modules button {
  height: 100%;
  font-size: 1.125rem;
  font-weight: 300;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.nav-platform .top-bar .nav-modules button:not(:first-child) {
  margin-left: 1rem;
}
.nav-platform .top-bar .nav-modules button span {
  display: block;
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  height: 0.72rem;
  background-color: #FCFCFA;
  border-radius: 0 0 3px 3px;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: 5px;
}
.nav-platform .top-bar .nav-modules button:hover span {
  background-color: var(--brand-light);
}
.nav-platform .top-bar .nav-modules button.selected span {
  background-color: var(--brand-dark);
}
.nav-platform .top-bar .close {
  display: flex;
  align-items: center;
}
.nav-platform .top-bar .close a {
  padding: 1rem;
  color: #B4B5B8;
}
.nav-platform .top-bar .close a:hover {
  color: #1E1E1F;
}
.nav-platform .about {
  flex-direction: column;
  margin-top: 3.5rem;
}
@media (min-width: 992px) {
  .nav-platform .about {
    flex-direction: row;
  }
}
.nav-platform .about .module-group-logo {
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .nav-platform .about .module-group-logo {
    margin-bottom: 3.5rem;
  }
}
.nav-platform .about .module-group-logo img {
  width: auto;
}
.nav-platform .about .module-group-description {
  max-width: 720px;
  margin-bottom: 3.5rem;
}
.nav-platform .modules {
  flex-wrap: wrap;
  padding: 3.5rem 1.5rem;
  border-top: 1px solid #EDEDEB;
}
.nav-platform .modules .module {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 1rem 0.5rem;
  text-decoration: none;
}
.nav-platform .modules .module i {
  font-size: calc(1.2864583333rem + 0.4277777778vw);
  margin-right: 1rem;
  color: #707173;
}
@media (min-width: 1500px) {
  .nav-platform .modules .module i {
    font-size: 1.6875rem;
  }
}
.nav-platform .modules .module h2, .nav-platform .modules .module .h2 {
  font-size: calc(1.2864583333rem + 0.4277777778vw);
  font-weight: 300;
  color: #707173;
  margin-bottom: 0;
}
@media (min-width: 1500px) {
  .nav-platform .modules .module h2, .nav-platform .modules .module .h2 {
    font-size: 1.6875rem;
  }
}
.nav-platform .modules .module:hover i, .nav-platform .modules .module:hover h2, .nav-platform .modules .module:hover .h2 {
  color: #1E1E1F;
}
.nav-platform .modules a.col-3.module[disabled] {
  opacity: 0.2;
  pointer-events: none;
}
.nav-platform .footer {
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  z-index: 99;
  width: 100%;
  background-color: #F7F6F2;
  padding: 5px 1.2rem 5px 1.2rem;
}
.nav-platform .footer .horizont-fullname {
  color: #B4B5B8;
  margin-left: auto;
}
.nav-platform .footer .horizont-fullname span {
  font-weight: 500;
  color: #9E9FA1;
}

.HKDM.nav-platform, .LUDU.nav-platform, .GDCKZG.nav-platform, .HORIZONT.nav-platform {
  background: url(../assets/images/Registar-background.jpg) repeat center center;
  /*&::before {
      width: 100%;
      height: 100%;
      content: "";
      position: absolute;
      background: #555;
      top: 0;
      left: 0;
      background: url(../assets/images/Registar-background.jpg) no-repeat center center;
  }*/
}
.HKDM.nav-platform .scroll, .LUDU.nav-platform .scroll, .GDCKZG.nav-platform .scroll, .HORIZONT.nav-platform .scroll {
  background-color: transparent;
}
.HKDM.nav-platform .about, .LUDU.nav-platform .about, .GDCKZG.nav-platform .about, .HORIZONT.nav-platform .about {
  display: none;
}
.HKDM.nav-platform .top-bar, .LUDU.nav-platform .top-bar, .GDCKZG.nav-platform .top-bar, .HORIZONT.nav-platform .top-bar {
  background-color: #ffffff;
  height: 50px;
}
.HKDM.nav-platform .top-bar .title, .LUDU.nav-platform .top-bar .title, .GDCKZG.nav-platform .top-bar .title, .HORIZONT.nav-platform .top-bar .title {
  background-color: #ffffff;
  height: 50px;
  padding-left: 1rem;
}
.HKDM.nav-platform .top-bar .nav-modules, .LUDU.nav-platform .top-bar .nav-modules, .GDCKZG.nav-platform .top-bar .nav-modules, .HORIZONT.nav-platform .top-bar .nav-modules {
  padding-left: 135px;
}
.HKDM.nav-platform .nav-modules button, .LUDU.nav-platform .nav-modules button, .GDCKZG.nav-platform .nav-modules button, .HORIZONT.nav-platform .nav-modules button {
  position: relative;
  padding-top: 17px;
  text-transform: uppercase;
}
.HKDM.nav-platform .nav-modules button.selected, .LUDU.nav-platform .nav-modules button.selected, .GDCKZG.nav-platform .nav-modules button.selected, .HORIZONT.nav-platform .nav-modules button.selected {
  color: var(--brand-dark);
}
.HKDM.nav-platform .nav-modules button.selected span, .LUDU.nav-platform .nav-modules button.selected span, .GDCKZG.nav-platform .nav-modules button.selected span, .HORIZONT.nav-platform .nav-modules button.selected span {
  position: absolute;
  bottom: 6px;
  border-radius: 0px;
  height: 0.22rem;
  margin-bottom: 0;
}
.HKDM.nav-platform .modules, .LUDU.nav-platform .modules, .GDCKZG.nav-platform .modules, .HORIZONT.nav-platform .modules {
  padding: 3.5rem 14.5rem;
}
.HKDM.nav-platform .modules .module, .LUDU.nav-platform .modules .module, .GDCKZG.nav-platform .modules .module, .HORIZONT.nav-platform .modules .module {
  height: 300px;
  padding: 10px 10px 10px 10px;
}
.HKDM.nav-platform .modules a:nth-child(1), .HKDM.nav-platform .modules a:nth-child(2), .HKDM.nav-platform .modules a:nth-child(3), .HKDM.nav-platform .modules a:nth-child(4), .LUDU.nav-platform .modules a:nth-child(1), .LUDU.nav-platform .modules a:nth-child(2), .LUDU.nav-platform .modules a:nth-child(3), .LUDU.nav-platform .modules a:nth-child(4), .GDCKZG.nav-platform .modules a:nth-child(1), .GDCKZG.nav-platform .modules a:nth-child(2), .GDCKZG.nav-platform .modules a:nth-child(3), .GDCKZG.nav-platform .modules a:nth-child(4), .HORIZONT.nav-platform .modules a:nth-child(1), .HORIZONT.nav-platform .modules a:nth-child(2), .HORIZONT.nav-platform .modules a:nth-child(3), .HORIZONT.nav-platform .modules a:nth-child(4) {
  height: auto;
}
.HKDM.nav-platform .modules .module .content, .LUDU.nav-platform .modules .module .content, .GDCKZG.nav-platform .modules .module .content, .HORIZONT.nav-platform .modules .module .content {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 35px;
  border: 3px solid #fff;
  box-shadow: 0px 5px 15px -1px rgba(85, 85, 85, 0.6);
  overflow: hidden;
  position: relative;
}
.HKDM.nav-platform .modules .module .content .header, .LUDU.nav-platform .modules .module .content .header, .GDCKZG.nav-platform .modules .module .content .header, .HORIZONT.nav-platform .modules .module .content .header {
  display: none;
  width: 100%;
  height: 150px;
  background-color: var(--brand-dark);
}
.HKDM.nav-platform .modules .module .content .icon, .LUDU.nav-platform .modules .module .content .icon, .GDCKZG.nav-platform .modules .module .content .icon, .HORIZONT.nav-platform .modules .module .content .icon {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.HKDM.nav-platform .modules .module .content .icon img, .LUDU.nav-platform .modules .module .content .icon img, .GDCKZG.nav-platform .modules .module .content .icon img, .HORIZONT.nav-platform .modules .module .content .icon img {
  text-align: center;
  background: #fff;
}
.HKDM.nav-platform .modules .module i, .LUDU.nav-platform .modules .module i, .GDCKZG.nav-platform .modules .module i, .HORIZONT.nav-platform .modules .module i {
  display: none;
}
.HKDM.nav-platform .modules .module h2, .HKDM.nav-platform .modules .module .h2, .LUDU.nav-platform .modules .module h2, .LUDU.nav-platform .modules .module .h2, .GDCKZG.nav-platform .modules .module h2, .GDCKZG.nav-platform .modules .module .h2, .HORIZONT.nav-platform .modules .module h2, .HORIZONT.nav-platform .modules .module .h2 {
  color: #fff;
  position: absolute;
  bottom: 0;
  text-align: center;
  padding-top: 69px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  width: -moz-available; /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  width: fill-available;
  height: 175px;
  background-color: color-mix(in srgb, var(--brand-dark), rgba(0, 0, 0, 0) 20%);
}
.HKDM.nav-platform .modules .module h2 .icon-small, .HKDM.nav-platform .modules .module .h2 .icon-small, .LUDU.nav-platform .modules .module h2 .icon-small, .LUDU.nav-platform .modules .module .h2 .icon-small, .GDCKZG.nav-platform .modules .module h2 .icon-small, .GDCKZG.nav-platform .modules .module .h2 .icon-small, .HORIZONT.nav-platform .modules .module h2 .icon-small, .HORIZONT.nav-platform .modules .module .h2 .icon-small {
  display: inline-block !important;
  width: 42px;
}
.HKDM.nav-platform .modules .module h2 .icon-small.no-image, .HKDM.nav-platform .modules .module .h2 .icon-small.no-image, .LUDU.nav-platform .modules .module h2 .icon-small.no-image, .LUDU.nav-platform .modules .module .h2 .icon-small.no-image, .GDCKZG.nav-platform .modules .module h2 .icon-small.no-image, .GDCKZG.nav-platform .modules .module .h2 .icon-small.no-image, .HORIZONT.nav-platform .modules .module h2 .icon-small.no-image, .HORIZONT.nav-platform .modules .module .h2 .icon-small.no-image {
  display: none !important;
}
.HKDM.nav-platform .modules .module h2::before, .HKDM.nav-platform .modules .module .h2::before, .LUDU.nav-platform .modules .module h2::before, .LUDU.nav-platform .modules .module .h2::before, .GDCKZG.nav-platform .modules .module h2::before, .GDCKZG.nav-platform .modules .module .h2::before, .HORIZONT.nav-platform .modules .module h2::before, .HORIZONT.nav-platform .modules .module .h2::before {
  content: "";
  position: absolute;
  background-color: var(--brand-dark);
  width: 100%;
  left: 0;
  height: 120px;
  display: none;
}
.HKDM.nav-platform .modules .module .content:hover h2, .HKDM.nav-platform .modules .module .content:hover .h2, .LUDU.nav-platform .modules .module .content:hover h2, .LUDU.nav-platform .modules .module .content:hover .h2, .GDCKZG.nav-platform .modules .module .content:hover h2, .GDCKZG.nav-platform .modules .module .content:hover .h2, .HORIZONT.nav-platform .modules .module .content:hover h2, .HORIZONT.nav-platform .modules .module .content:hover .h2 {
  background-color: color-mix(in srgb, rgba(85, 85, 85, 0.6), rgba(0, 0, 0, 0) 20%);
}
.HKDM.nav-platform .logo, .LUDU.nav-platform .logo, .GDCKZG.nav-platform .logo, .HORIZONT.nav-platform .logo {
  background: url(../assets/images/logo.png) no-repeat 3px 6px;
  background-size: 65%;
  width: 150px;
  height: 50px;
}
.HKDM.nav-platform .logo h1, .HKDM.nav-platform .logo .h1, .LUDU.nav-platform .logo h1, .LUDU.nav-platform .logo .h1, .GDCKZG.nav-platform .logo h1, .GDCKZG.nav-platform .logo .h1, .HORIZONT.nav-platform .logo h1, .HORIZONT.nav-platform .logo .h1 {
  display: none;
}

.LUDU.nav-platform {
  background: url(../assets/images/horizont-landingpage-bez-loga.jpg) repeat center center;
}
.LUDU.nav-platform .logo {
  background: url(../assets/images/LUKA-DUBROVNIK_logo.png) no-repeat 3px 3px;
  background-size: 29%;
  width: 150px;
  height: 50px;
}
.LUDU.nav-platform .logo h1, .LUDU.nav-platform .logo .h1 {
  display: none;
}

.HORIZONT.nav-platform {
  background: url(../assets/images/horizont-landingpage-bez-loga.jpg) repeat center center;
}
.HORIZONT.nav-platform .logo {
  background: url(../assets/images/horizont-logo.png) no-repeat 0px 6px;
  background-size: 80%;
  width: 150px;
  height: 50px;
}
.HORIZONT.nav-platform .logo h1, .HORIZONT.nav-platform .logo .h1 {
  display: none;
}

.GDCKZG.nav-platform {
  background: url(../assets/images/horizont-landingpage-bez-loga.jpg) repeat center center;
}
.GDCKZG.nav-platform .logo {
  background: url(../assets/images/gckzg-logo.png) no-repeat 0px 6px;
  background-size: 80%;
  width: 150px;
  height: 50px;
}
.GDCKZG.nav-platform .logo h1, .GDCKZG.nav-platform .logo .h1 {
  display: none;
}

.HKDM2.nav-platform {
  background: url(../assets/images/Registar-background.jpg) repeat center center;
  /*&::before {
      width: 100%;
      height: 100%;
      content: "";
      position: absolute;
      background: #555;
      top: 0;
      left: 0;
      background: url(../assets/images/Registar-background.jpg) no-repeat center center;
  }*/
}
.HKDM2.nav-platform .scroll {
  background-color: transparent;
}
.HKDM2.nav-platform .about {
  display: none;
}
.HKDM2.nav-platform .top-bar {
  background-color: #ffffff;
  height: 50px;
}
.HKDM2.nav-platform .top-bar .title {
  background-color: #ffffff;
  height: 50px;
  padding-left: 1rem;
}
.HKDM2.nav-platform .top-bar .nav-modules {
  padding-left: 135px;
}
.HKDM2.nav-platform .nav-modules button {
  position: relative;
  padding-top: 17px;
  text-transform: uppercase;
}
.HKDM2.nav-platform .nav-modules button.selected {
  color: var(--brand-dark);
}
.HKDM2.nav-platform .nav-modules button.selected span {
  position: absolute;
  bottom: 0px;
  border-radius: 0px;
  height: 0.22rem;
  margin-bottom: 0;
}
.HKDM2.nav-platform .modules {
  padding: 3.5rem 14.5rem;
}
.HKDM2.nav-platform .modules .module {
  height: 460px;
  padding: 10px 10px 10px 10px;
}
.HKDM2.nav-platform .modules .module .content {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0px 5px 15px -1px rgba(85, 85, 85, 0.6);
  overflow: hidden;
}
.HKDM2.nav-platform .modules .module .content .header {
  width: 100%;
  height: 150px;
  background-color: var(--brand-dark);
}
.HKDM2.nav-platform .modules .module .content .icon {
  position: relative;
  width: 115px;
  height: 115px;
  border-radius: 70px;
  border: 8px solid var(--brand-dark);
  top: -60px;
  left: calc(50% - 58px);
  overflow: hidden;
}
.HKDM2.nav-platform .modules .module .content .icon img {
  padding: 15px;
  text-align: center;
  background: #fff;
}
.HKDM2.nav-platform .modules .module i {
  display: none;
}
.HKDM2.nav-platform .modules .module h2, .HKDM2.nav-platform .modules .module .h2 {
  text-align: center;
  width: 100%;
  width: -moz-available; /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  width: fill-available;
}
.HKDM2.nav-platform .logo {
  background: url(../assets/images/logo.png) no-repeat center 6px 6px;
  background-size: 65%;
  width: 150px;
  height: 50px;
}
.HKDM2.nav-platform .logo h1, .HKDM2.nav-platform .logo .h1 {
  display: none;
}

.header {
  display: flex;
  align-items: center;
}
.header i[class*=fa] {
  font-size: 1.125rem;
  text-align: center;
  width: 1.25em;
}
.header__horizont > .header__item, .header__brand > .header__item {
  display: flex;
}
.header__horizont {
  display: flex;
  height: var(--topbar-height, 32px);
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin: 0 !important;
  background: var(--topbar-bg, #6CA5D9);
  border-bottom: 1px solid var(--brand-strong, #3A72A8);
  color: #fff;
  overflow: hidden;
}
.header .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.header .header__item {
  display: flex !important;
  align-items: center !important;
  height: 100%;
}
.header__horizont a,
.header__horizont button {
  color: #fff;
  font-weight: 800;
}
.header__horizont a.button-icon,
.header__horizont button.button-icon {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  cursor: pointer;
}
.header__horizont a:hover,
.header__horizont button:hover {
  background: var(--brand-strong, #3A72A8);
}
.header__horizont .log-out {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--topbar-height, 32px);
  padding-left: 0;
}
.header__horizont .log-out .button-icon {
  display: flex !important;
  width: 48px;
  flex: 0 0 48px;
  height: var(--topbar-height, 32px);
  padding: 0 !important;
  justify-content: center;
  align-items: center;
  border-left: 1px solid var(--border-brand-muted, #A8CBE9);
  box-sizing: border-box;
  background-image: url("../img/icon-logout.svg?v=20260528a");
  background-repeat: no-repeat;
  background-position: center;
  background-origin: border-box;
  background-size: 16px 16px;
}
.header__horizont .log-out .button-icon::before {
  content: none;
}
.header__horizont .log-out .button-icon i[class*=fa] {
  display: none !important;
}
.header__horizont .user-name {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  height: var(--topbar-height, 32px);
  padding: 0 var(--spacing-lg, 16px) 0 calc(var(--spacing-lg, 16px) + 16px + var(--spacing-sm, 8px));
  box-sizing: border-box;
  position: relative;
  color: var(--neutral-default, #FFFFFF);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.header__horizont .user-name::before {
  content: '';
  position: absolute;
  left: var(--spacing-lg, 16px);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("../img/icon-user-cog.svg?v=20260528a");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.header__horizont .user-name::after {
  content: 'ADMINISTRATOR';
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-top: 1px;
}
.header__horizont .header__user-nav {
  display: flex !important;
  flex: 0 0 624px;
  width: 624px;
  max-width: 624px;
  height: var(--topbar-height, 32px);
  justify-content: flex-end;
  align-items: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--topbar-bg, #6CA5D9);
  box-sizing: border-box;
}

/* === Figma topbar — user-nav icon swap (first 4 buttons) === */
/* Hide the existing FontAwesome glyphs in the first 4 user-nav buttons */
.header__user-nav > a.button-icon:nth-child(-n+4) i[class*=fa] {
  display: none !important;
}

/* Make each of the first 4 buttons render its SVG icon as a centered background */
.header__user-nav > a.button-icon:nth-child(-n+4) {
  display: flex !important;
  flex: 0 0 48px;
  width: 48px;
  height: var(--topbar-height, 32px);
  padding: 0 !important;
  justify-content: center;
  align-items: center;
  border-left: 1px solid var(--border-brand-muted, #A8CBE9);
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: border-box;
  background-size: 16px 16px;
}

/* Kill the legacy 1px gray ::before divider on these icon buttons — we have border-left now */
.header__user-nav > a.button-icon:nth-child(-n+4)::before {
  content: none !important;
}

/* Re-color the legacy .log-out::before 1px divider from gray to Figma's --border-brand-muted */
.header__horizont .log-out::before {
  background: var(--border-brand-muted, #A8CBE9) !important;
}

.header__user-nav > a.button-icon:nth-child(1) {
  background-image: url("../img/icon-search.svg?v=20260528a");
}
.header__user-nav > a.button-icon:nth-child(2) {
  background-image: url("../img/icon-bell.svg?v=20260528a");
}
.header__user-nav > a.button-icon:nth-child(3) {
  background-image: url("../img/icon-calendar-check.svg?v=20260528a");
}
.header__user-nav > a.button-icon:nth-child(4) {
  background-image: url("../img/icon-question-circle.svg?v=20260528a");
}
.header .header__logo-toggle {
  background-color: transparent;
}
.header__logo {
  display: flex !important;
  width: 72px;
  height: var(--topbar-height, 32px);
  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px) !important;
  justify-content: center;
  align-items: center;
  border-right: 1px solid var(--border-brand-muted, #A8CBE9);
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
}
.header__logo .logo {
  background: none !important;
  background-image: none !important;
  width: auto;
  height: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__logo .logo img {
  display: block;
  height: 18px;
  width: auto;
}
.header__logo i[class*=fa] {
  background-image: linear-gradient(to bottom, #343536, #CACCCF 136%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.header__toggle-sidebar {
  display: flex !important;
  width: 54px;
  height: var(--topbar-height, 32px);
  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px) !important;
  justify-content: center;
  align-items: center;
  border-left: none;
  border-right: 1px solid var(--border-brand-muted, #A8CBE9);
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  background-image: url("../img/icon-sidebar-toggle-hide.svg?v=20260528a");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 18px;
}
.header__toggle-sidebar img {
  display: none !important;
}
.header__toggle-sidebar::before {
  content: none;
  display: none;
}
.header__module-nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 1.125rem;
  color: #707173;
  font-weight: 400;
  border-left: 1px solid #fff;
}
.header__group-module, .header__module {
  position: relative;
  display: flex;
  align-items: center;
}
.header__group-module {
  display: none; /* Hidden until confirmed in Figma — do not delete */
  padding-right: 0.75rem;
  border-right: 1px dashed #CACCCF;
  text-transform: uppercase;
  letter-spacing: 0.11rem;
}
.header__module {
  display: flex;
  height: var(--topbar-height, 32px);
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  background: var(--brand-strong, #3A72A8);
  box-sizing: border-box;
  border-right: none;
  color: var(--neutral-default, #FFFFFF);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
}
.header__module span {
  margin-right: 0.3rem;
}
.header__module i[class*=fa] {
  display: none !important;
}
.header__module::after {
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  background-image: url("../img/icon-chevron-down.svg?v=20260528a");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 6px;
  flex-shrink: 0;
}
.header__granule {
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.header__granule span.parent {
  display: flex;
  align-items: center;
}
.header__granule h1, .header__granule .h1 {
  margin-bottom: 0;
  font-size: inherit;
  font-weight: 400;
  color: #343536;
}
.header__next-previous {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.header__brand {
  position: relative;
  height: 65px;
  max-height: 65px;
}
.header__brand::before {
  content: " ";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 1px 6px 0px rgba(0, 0, 0, 0.06);
}
.header__control-bar {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-right-width: 2px;
  border-right-style: solid;
  overflow: hidden;
  z-index: 9;
}
.header__control-bar form {
  display: flex;
  flex-wrap: wrap;
}
.header__control-bar .btn-control-bar {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
}
.header__control-bar .btn-control-bar i[class*=fa] {
  font-size: 1.5rem;
}
.header__control-bar--secondary {
  z-index: 8;
  margin-left: -10px;
}
.header__control-bar--tertiary {
  z-index: 7;
  margin-left: -10px;
}

.LUDU .header .logo {
  background: url(../assets/images/LUKA-DUBROVNIK_logo.png) no-repeat 3px 3px;
  background-size: 29%;
  width: 150px;
  height: 50px;
}

.HORIZONT .header .logo {
  background: url(../assets/images/horizont-logo.png) no-repeat 0px 6px;
  background-size: 80%;
  width: 150px;
  height: 50px;
}

.GDCKZG .header .logo {
  background: url(../assets/images/gckzg-logo.png) no-repeat 0px 6px;
  background-size: 80%;
  width: 150px;
  height: 50px;
}

.sidebar {
  display: flex;
  width: 224px;
  max-width: 224px;
  min-width: 224px;
  flex-direction: column;
  align-items: flex-start;
  background-image: none;
  background-color: var(--sidebar-bg, #FAFAFA);
  border-left: 1px solid var(--border-muted, #E0E0E0);
  border-right: 1px solid var(--border-muted, #E0E0E0);
  box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.09);
  box-sizing: border-box;
}
.sidebar .module-info {
  display: flex;
  flex-direction: row-reverse;
  align-self: stretch;
  padding: 0 0 0 var(--spacing-sm, 8px);
  justify-content: space-between;
  align-items: center;
  background: var(--sidebar-header-bg, #FAFAFA);
  border-bottom: 1px solid var(--border-muted, #E0E0E0);
  box-sizing: border-box;
  min-height: 28px;
}
.sidebar .accordion .accordion-item .accordion-header .accordion-button {
  display: flex;
  height: 32px;
  padding: var(--spacing-sm, 8px) var(--spacing-space-8, 8px) var(--spacing-sm, 8px) var(--spacing-md, 12px);
  align-items: center;
  gap: var(--spacing-sm, 8px);
  align-self: stretch;
  border-bottom: 1px solid var(--border-muted, #E0E0E0);
  background: var(--neutral-tint, #FAFAFA);
  background-color: var(--neutral-tint, #FAFAFA);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--module-rail-text, #4B4B4B);
  box-sizing: border-box;
}
/* Figma AIFM sidebar group item — hover: --neutral-subtle (#EEE) */
.sidebar .accordion .accordion-item .accordion-header .accordion-button:hover {
  background-color: var(--neutral-subtle, #EEEEEE) !important;
}
/* Active state (expanded — :not(.collapsed)): --neutral-default (#FFF) per Figma */
.sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--neutral-default, #FFFFFF) !important;
  background: var(--neutral-default, #FFFFFF) !important;
}
.sidebar .accordion .accordion-item .accordion-header .accordion-button:focus, .sidebar .accordion .accordion-item .accordion-header .accordion-button:focus:not(.collapsed) {
  box-shadow: 0 -1px 0 white;
}
/* Figma AIFM sidebar group items — chevron on the LEFT via ::before, no right chevron */
.sidebar .accordion,
.sidebar .accordion .accordion-item,
.sidebar .accordion .accordion-item .accordion-header {
  width: 100%;
  align-self: stretch;
}
.sidebar .accordion .accordion-item .accordion-header .accordion-button::before {
  content: '';
  position: static;
  display: block;
  width: 16px;
  height: 16px;
  opacity: 1;
  flex-shrink: 0;
  background-color: transparent;
  /* Collapsed by default — show pre-rotated right-facing chevron (no CSS transform → no GPU halo) */
  background-image: url("../img/icon-sidebar-chevron-right.svg?v=20260528b");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  border: none;
  box-shadow: none;
  outline: none;
}
.sidebar .accordion .accordion-item .accordion-header .accordion-button[aria-expanded=true]::before,
.sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::before {
  /* Expanded — swap to the down-facing SVG instead of rotating */
  background-image: url("../img/icon-sidebar-chevron.svg?v=20260528b");
}
.sidebar .accordion .accordion-item .accordion-header .accordion-button::after {
  content: none;
  display: none;
  background-image: none;
  width: 0;
  height: 0;
}
.sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  box-shadow: none;
}
.sidebar .accordion .accordion-item .accordion-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 300;
}
.sidebar .accordion .accordion-item .accordion-body::after {
  position: absolute;
  content: " ";
  left: 0;
  top: 0;
  width: 7px;
  height: 100%;
}
/* Figma AIFM — child items inside an expanded group (default state).
   Layout per Figma: 32px-tall flex column, 8px top/right/bottom + 12px left
   padding, white --neutral-default background, gray --border-muted bottom rule.
   Selected/hover state handled separately. */
.sidebar .accordion .accordion-item .accordion-body .nav-link {
  display: flex;
  height: 32px;
  padding: var(--spacing-sm, 8px) var(--spacing-sm, 8px) var(--spacing-sm, 8px) var(--spacing-md, 12px);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-sm, 8px);
  border-bottom: 1px solid var(--border-muted, #E0E0E0);
  background: var(--neutral-default, #FFFFFF);
  line-height: 1.23;
  box-sizing: border-box;
}
.sidebar .accordion .accordion-item .accordion-body .nav-link .selected {
  background-color: var(--brand-neutral);
}

.HKDM.main .sidebar {
  display: flex;
  width: 224px;
  max-width: 224px;
  min-width: 224px;
  flex-direction: column;
  align-items: flex-start;
  background-image: none;
  background-color: var(--sidebar-bg, #FAFAFA);
  border-left: 1px solid var(--border-muted, #E0E0E0);
  border-right: 1px solid var(--border-muted, #E0E0E0);
  box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.09);
  box-sizing: border-box;
}
/* HKDM tenant — use the same Figma sidebar header layout as the base rule.
   The old rounded "module avatar" styling is intentionally cleared. */
.HKDM.main .sidebar .module-info {
  display: flex;
  flex-direction: row-reverse;
  align-self: stretch;
  padding: 0 0 0 var(--spacing-sm, 8px);
  justify-content: space-between;
  align-items: center;
  background: var(--sidebar-header-bg, #FAFAFA);
  border-bottom: 1px solid var(--border-muted, #E0E0E0);
  box-sizing: border-box;
  min-height: 28px;
}
.HKDM.main .sidebar .module-info .icon {
  display: flex;
  width: 28px;
  align-self: stretch;
  padding: var(--spacing-sm, 8px) 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
  border-left: 1px solid var(--border-muted, #E0E0E0);
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background-image: url("/img/icon-sidebar-back.svg?v=20260528a");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7px 12px;
  box-sizing: border-box;
  cursor: pointer;
}
.HKDM.main .sidebar .module-info h2, .HKDM.main .sidebar .module-info .h2 {
  padding: 0;
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--neutral-base, #6E6E6E);
  width: auto;
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button {
  display: flex;
  height: 32px;
  padding: var(--spacing-sm, 8px) var(--spacing-space-8, 8px) var(--spacing-sm, 8px) var(--spacing-md, 12px);
  align-items: center;
  gap: var(--spacing-sm, 8px);
  align-self: stretch;
  border-bottom: 1px solid var(--border-muted, #E0E0E0);
  background: var(--neutral-tint, #FAFAFA);
  background-color: var(--neutral-tint, #FAFAFA);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--module-rail-text, #4B4B4B);
  box-sizing: border-box;
}
/* HKDM tenant — Figma AIFM sidebar group item hover: --neutral-subtle (#EEE),
   active (expanded): --neutral-default (#FFF) */
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button:hover {
  background-color: var(--neutral-subtle, #EEEEEE) !important;
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--neutral-default, #FFFFFF) !important;
  background: var(--neutral-default, #FFFFFF) !important;
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button:focus, .HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button:focus:not(.collapsed) {
  box-shadow: 0 -1px 0 white;
}
/* HKDM tenant — re-apply the Figma chevron ::before so it overrides the base
   .sidebar rule with matching specificity. ::after is force-hidden because Bootstrap's
   default chevron-down would otherwise leak through. */
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button::before {
  content: '';
  position: static;
  display: block;
  width: 16px;
  height: 16px;
  opacity: 1;
  flex-shrink: 0;
  background-color: transparent;
  background-image: url("../img/icon-sidebar-chevron-right.svg?v=20260528b");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  border: none;
  box-shadow: none;
  outline: none;
  transition: none;
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button[aria-expanded=true]::before,
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::before {
  background-image: url("../img/icon-sidebar-chevron.svg?v=20260528b");
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button::after {
  content: none;
  display: none;
  background-image: none;
  font-family: inherit;
  width: 0;
  height: 0;
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  box-shadow: none;
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 300;
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-body::after {
  position: absolute;
  content: " ";
  left: 0;
  top: 0;
  width: 7px;
  height: 100%;
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-body .nav-link {
  padding: 1.125rem 1rem;
  line-height: 1.23;
}
.HKDM.main .sidebar .accordion .accordion-item .accordion-body .nav-link .selected {
  background-color: var(--brand-neutral);
}

.patient {
  width: 100%;
}
.patient .patient__aside {
  z-index: 9;
  display: flex;
  max-width: 222px;
  padding-right: 0;
  height: 100%;
}
@media (min-width: 992px) {
  .patient .patient__aside {
    position: sticky;
    top: 0.75rem;
  }
}
.patient .patient__photos {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.patient .patient__photos .patient__photo-title {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 1px;
  color: #707173;
  font-weight: 100;
  text-align: center;
  background: #fff;
  padding-top: 10px;
  margin-bottom: -1px;
  border-radius: 3px 3px 0 0;
  padding-bottom: 7px;
  z-index: 99;
  position: relative;
  border: 2px solid #E6E8EB;
  border-bottom: 1px solid #E6E8EB;
}
.patient .patient__photos .patient__photo-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  padding: 0.75rem;
  background: #fff;
  border: 2px solid #E6E8EB;
  margin-bottom: 5px;
}
.patient .patient__photos .patient__photo-wrapper:nth-child(4) {
  border-radius: 0 0 3px 3px;
}
.patient .patient__photos .patient__photo-wrapper:last-child {
  margin-bottom: 0;
}
.patient .patient__photos .patient__photo-wrapper figcaption {
  margin-top: 0.5vh;
  font-size: 0.8125rem;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  letter-spacing: 1px;
  color: #9E9FA1;
}
.patient .patient__photos .patient__photo-main {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-color: #FCFCFA;
  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.09), 0 1px 6px rgba(0, 0, 0, 0.09);
  border-radius: 3px;
  cursor: pointer;
}
.patient .patient__photos .patient__photo-main::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  background-position: center;
  opacity: 0;
}
.patient .patient__photos .patient__photo-main:hover {
  border-color: rgba(0, 0, 0, 0.36);
  box-shadow: none;
}
.patient .patient__photos .patient__photo-main:hover::before {
  opacity: 1;
  background: url("../img/scan-or-upload-icon.svg") no-repeat center, rgba(0, 0, 0, 0.45);
}
.patient .patient__photos img {
  border-radius: 6px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.patient .patient__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.patient .patient__content .patient__search input {
  background-color: rgba(235, 229, 251, 0.33);
}
.patient .patient__name {
  font-size: calc(1.3177083333rem + 0.7944444444vw);
  font-weight: 100;
  margin-top: -5px;
}
@media (min-width: 1500px) {
  .patient .patient__name {
    font-size: 2.0625rem;
  }
}
.patient .patient__tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.patient .patient-checkin-out {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem;
  background-color: #FCFCFA;
  border: 1px solid #F7F6F2;
  border-radius: 3px;
}
.patient .patient-checkin-out .btn {
  margin-bottom: 0.75rem;
}
.patient .patient-checkin-out .btn:last-child:not(:only-child) {
  margin-bottom: 0;
}
.patient .patient-checkin-out .alert {
  width: 100%;
  margin-bottom: 0;
}
.patient .disabled-biometry-img {
  opacity: 0.21;
}

.biometric .biometric__photo {
  display: flex;
}
.biometric .biometric__photo--shot {
  cursor: pointer;
}
.biometric .biometric__photo--shot:hover {
  filter: contrast(1.2);
}
.biometric .biometric__photo--camera {
  height: calc(calc(100vh - (50px + 65px + 36px)) - 190px);
  position: sticky;
  top: 0;
}
.biometric .biometric__photo img,
.biometric .biometric__photo video {
  border-radius: 3px;
  overflow: hidden;
  object-fit: cover;
  width: 100%;
}
.biometric .biometric__photo #camera {
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
}
.biometric .biometric__photo #camera.NoCam {
  background: url("../img/no-cam.svg") no-repeat center, #fff;
  background-size: 240px;
  pointer-events: none;
  cursor: not-allowed;
}
.biometric .biometric__photo #camera video {
  width: 100% !important;
  height: 100% !important;
  border: 3px solid #CACCCF;
  cursor: pointer;
}
.biometric .biometric__photo #camera video:hover {
  border-color: #54389b;
}
.biometric .biometric__photo #camera video:focus {
  border-color: #FF5538;
}

.ordination-overview .item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.ordination-overview .item .header {
  border-bottom: 1px solid #CACCCF;
  align-items: stretch;
  flex-wrap: wrap;
}
.ordination-overview .item .header .ordination-number {
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  background-color: #FF5538;
  display: flex;
  align-items: center;
}
.ordination-overview .item .header .appointment-time {
  font-size: calc(1.2552083333rem + 0.0611111111vw);
  font-weight: 300;
  color: #707173;
  flex: 1;
  margin-right: auto;
  white-space: nowrap;
}
@media (min-width: 1500px) {
  .ordination-overview .item .header .appointment-time {
    font-size: 1.3125rem;
  }
}
.ordination-overview .item .header .remaining-time {
  font-size: calc(1.2552083333rem + 0.0611111111vw);
  font-weight: 300;
  color: #707173;
  border-left: 1px solid #E6E8EB;
}
@media (min-width: 1500px) {
  .ordination-overview .item .header .remaining-time {
    font-size: 1.3125rem;
  }
}
.ordination-overview .item .header .ordination-number,
.ordination-overview .item .header .appointment-time,
.ordination-overview .item .header .remaining-time {
  padding: 0 0.75rem;
}
.ordination-overview .item .doctor {
  font-size: calc(1.2708333333rem + 0.2444444444vw);
  border-bottom: 1px solid #CACCCF;
  color: var(--brand-dark);
}
@media (min-width: 1500px) {
  .ordination-overview .item .doctor {
    font-size: 1.5rem;
  }
}
.ordination-overview .item .patient {
  flex: 1;
}
.ordination-overview .item .patient .type {
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 100;
  color: #707173;
}
.ordination-overview .item .patient .fullname {
  font-size: calc(1.2708333333rem + 0.2444444444vw);
  font-weight: 400;
  color: #343536;
}
@media (min-width: 1500px) {
  .ordination-overview .item .patient .fullname {
    font-size: 1.5rem;
  }
}
.ordination-overview .item .footer {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #F7F6F2;
  background-color: #ef544d;
  margin-right: 60px;
  border-top-right-radius: 3px;
  line-height: 1.23;
}
.ordination-overview .item .footer .ordination-type {
  padding-right: 0.75rem;
  white-space: nowrap;
}
.ordination-overview .item .footer .checkup-type {
  padding-left: 0.75rem;
  border-left: 1px solid rgba(237, 237, 235, 0.45);
}
.ordination-overview .item .ordination-state {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  position: absolute;
  bottom: 0.75rem;
  right: 0;
  font-size: calc(1.2552083333rem + 0.0611111111vw);
}
@media (min-width: 1500px) {
  .ordination-overview .item .ordination-state {
    font-size: 1.3125rem;
  }
}
.ordination-overview .item .ordination-occupied {
  color: #ef544d;
}
.ordination-overview .item .doctor,
.ordination-overview .item .patient,
.ordination-overview .item .footer {
  padding: 0.75rem;
}

.header__brand {
  background-color: var(--brand-header);
}
.header__control-bar {
  border-right-color: var(--brand-light);
}
.header__control-bar .btn-control-bar {
  color: var(--brand-header-controls);
}
.header__control-bar .btn-control-bar:hover {
  color: var(--brand-light);
  background: var(--brand-dark);
}

/* Figma AIFM — strip the legacy "indicator bar" backgrounds that were painting
   #ededeb on ::before / focus / :not(.collapsed). The chevron now lives in the
   ::before background-image and we don't want a colored box behind it. */
.sidebar .accordion .accordion-item .accordion-header .accordion-button:focus,
.sidebar .accordion .accordion-item .accordion-header .accordion-button:focus:not(.collapsed) {
  background-color: var(--neutral-tint, #FAFAFA);
  outline: none;
  box-shadow: none;
}
.sidebar .accordion .accordion-item .accordion-header .accordion-button[aria-expanded=false]::before,
.sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::before {
  background-color: transparent;
}
.sidebar .accordion .accordion-item .accordion-header .accordion-button::after,
.sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  opacity: 1;
}
.sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--neutral-tint, #FAFAFA);
}
.sidebar .accordion .accordion-item .accordion-body::after {
  background-color: #ededeb;
}
/* Override legacy gray styling for child nav-links so Figma white default wins.
   Hover/selected states for these children are TBD per Figma — keeping them
   neutral for now until specs land. */
.sidebar .accordion .accordion-item .accordion-body .nav-link {
  color: var(--neutral-base, #6E6E6E);
  background-color: var(--neutral-default, #FFFFFF) !important;
}
/* Figma AIFM child item hover: --neutral-ghost (#F5F5F5) */
.sidebar .accordion .accordion-item .accordion-body .nav-link:hover {
  color: var(--neutral-base, #6E6E6E);
  background-color: var(--neutral-ghost, #F5F5F5) !important;
}
/* Figma AIFM child item active/selected state: --brand-tint (#E7F4FD)
   light-blue background, --border-subtle (#EEE) bottom border. */
.sidebar .accordion .accordion-item .accordion-body .nav-link.selected {
  color: var(--neutral-base, #6E6E6E);
  background-color: var(--brand-tint, #E7F4FD) !important;
  border-bottom: 1px solid var(--border-subtle, #EEEEEE) !important;
}

.btn-reset {
  padding: 0;
  box-shadow: none;
  text-shadow: none;
  border: 0;
  background: transparent;
}
.btn-reset:focus {
  box-shadow: none;
  background: transparent;
}
.btn-reset:active {
  box-shadow: none;
  background-color: transparent;
}
.btn-reset:active:focus {
  box-shadow: none;
}
.btn-reset:hover {
  text-shadow: none;
  box-shadow: none;
}

.module i,
.module h2,
.module .h2,
.nav-link,
.table-hover > tbody > tr > td,
.patient__photo-main,
.patient__photo-main::before,
.biometric__photo--camera video,
.biometric__photo--shot,
.btn-control-bar,
.form-check-label,
.btn,
.dropdown-item,
.dropdown-item a,
.navbar,
i,
a,
a::after,
a::before,
button,
button span,
button::after,
button::before,
input,
label,
select,
span::after,
span::before {
  transition: all 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}

textarea {
  transition: background 0.25s cubic-bezier(0.65, 0, 0.35, 1), border 0.25s cubic-bezier(0.65, 0, 0.35, 1), color 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}

.e-accordion .e-acrdn-item {
  transition: border 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}

.sticky {
  position: sticky;
  top: 0;
  z-index: 9;
}

.app-loading {
  position: absolute;
  top: 30vh;
  width: 100%;
  text-align: center;
}

html {
  overflow: hidden;
}

html,
body {
  font-family: "Fira Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-weight: 400;
}

#main *,
#header *,
#sidebar *,
#content *,
#footer * {
  text-decoration: none;
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: stretch;
  padding-bottom: 0;
}
.app img {
  width: 100%;
  height: auto;
}

.app > main {
  display: flex;
  flex: 1;
  z-index: 98;
}

.app > .header {
  position: sticky;
  top: 0;
  z-index: 99;
  flex: 0;
}

.app > main > .sidebar {
  position: relative;
  flex: 1;
  overflow-y: auto;
  float: left;
}

.app > main > .content {
  position: relative;
  flex: 1;
  z-index: 9;
  height: calc(100vh - (50px + 65px + 36px));
  overflow: auto;
  background: #F7F6F2;
  box-shadow: inset -30px 0 30px -30px white, inset 15px 0 15px -15px rgba(0, 0, 0, 0.18), inset 0 25px 25px -25px white;
}
.app > main > .content > .container-fluid, .app > main > .content > .container-smx, .app > main > .content > .container-sm, .app > main > .content > .container-md, .app > main > .content > .container-lg, .app > main > .content > .container-xl, .app > main > .content > .container-xxl {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Tablet breakpoint */
@media (any-pointer: coarse) and (max-device-width: 1280px) and (orientation: landscape) {
  .content,
  .sidebar {
    height: calc(100vh - (50px + 65px + 36px + 9px + 93px));
  }
}
.app > .footer {
  position: sticky;
  display: block;
  bottom: 0;
  z-index: 99;
  min-height: 0;
  max-height: none;
  background: transparent;
  border-top: none;
  padding: 0;
}
.app > .footer > .container-fluid, .app > .footer > .container-smx, .app > .footer > .container-sm, .app > .footer > .container-md, .app > .footer > .container-lg, .app > .footer > .container-xl, .app > .footer > .container-xxl,
.app > .footer > .row {
  display: block;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.app > .footer .col {
  display: flex;
  align-items: center;
}
.app > .footer p {
  margin-bottom: 0;
}

.app .roles {
  position: sticky;
  top: 12px;
}

.app .roles h3.title, .app .roles .title.h3 {
  font-size: larger;
}

.app .roles .h-tree .b-tree-view-node-title i {
  margin-right: 10px;
}

.app .roles .h-tree .custom-control .custom-control-input {
  position: relative;
  bottom: -4px;
}

.app .hori-data-grid .form-check-input {
  z-index: 1 !important;
  position: relative !important;
}

.display-none, .hidden {
  display: none !important;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

@media (max-width: 767.98px) {
  main .top-row:not(.auth) {
    display: none;
  }
  main .top-row.auth {
    justify-content: space-between;
  }
}
#qr-canvas {
  margin-bottom: 20px;
  width: 150px;
  height: 150px;
  border-radius: 6px;
}

#qr-video {
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
}

.holder.members-client-side::before {
  width: 100%;
  height: 100%;
  content: "";
  position: fixed;
  background: #555;
  top: 0;
  left: 0;
  background: url(../assets/images/background.jpg) no-repeat center center;
}

.holder.members-client-side > div {
  position: relative;
}

.h-translate {
  position: relative;
  display: inline-block;
}

.h-translate .edit-translation {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-left: 5px;
  cursor: pointer;
}

.h-translate input {
  text-transform: inherit;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  background-image: none;
  visibility: hidden;
  transition: none !important;
  transform: none !important;
  padding-block: 0px;
  padding-inline: 0px;
  width: inherit;
  color: inherit;
  background-color: transparent !important;
  border-color: transparent !important;
  outline: transparent !important;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  border: 0px none;
}

.h-translate input:focus {
  color: inherit;
  box-shadow: 0px 0px 6px -2px !important;
  border-radius: 5px !important;
}

.form-check-label .h-translate, .form-label .h-translate input:focus {
  color: #707173 !important;
}

.h-translate .resize-text {
  padding-right: 0px;
  margin-right: 0px; /* change to padding-inline-end if you prefer */
  display: inline-block;
  white-space: pre;
}

button .h-translate .resize-text {
  padding-right: 0px;
  margin-right: 0px; /* change to padding-inline-end if you prefer */
}

.h-translate .resize-input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Portrait and Landscape */
/* Portrait */
/* Landscape */
.ql-tooltip.ql-flip {
  position: relative !important;
}

.ql-editor img {
  max-width: 1366px !important;
}

@media print {
  /*body > *:not(.printDiv) { display: none; }*/
  body > .header, body > .footer, body > .main > aside {
    display: none !important;
  }
  html, body, .app > main, .app > main > .content, .print-iframe {
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    width: 1000px !important;
    border: none 0px !important;
    box-shadow: none !important;
  }
  .app > main > .content {
    overflow: inherit;
    height: auto;
    width: auto;
  }
}
.print-iframe {
  position: absolute !important;
  width: 1000px !important;
  height: 3000px !important;
  zoom: 1;
}

/* === HorizontBlazorApp.Modules scoped CSS ===
@import '_content/Blazored.Modal/Blazored.Modal.focqzu07g3.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/Blazorise.RichTextEdit/Blazorise.RichTextEdit.bundle.scp.css';
@import '_content/HorizontBlazorComponents/HorizontBlazorComponents.lozbv54cwp.bundle.scp.css';

/* /Components/CmsSettings.razor.rz.scp.css */
table[b-r9hd2z3c9x] { width: 100%; border-color: GrayText; margin-bottom: 50px; }
    table tr[b-r9hd2z3c9x] { border-width: 1px; }
    table tr td[b-r9hd2z3c9x] { padding: 5px; }
table thead tr[b-r9hd2z3c9x] { background: #e9ecef; color: #000; font-weight: bold; }

div[b-r9hd2z3c9x]  .filter { border: 15px dashed red; padding: 50px; }
/* /Components/Default.razor.rz.scp.css */
h4[b-mpylo386pv] { color: red; }
/* /Components/Modals/ConfirmModal.razor.rz.scp.css */

.box-holder .message[b-v8jyxbr3ch] { padding-bottom: 50px; }
/* /Pages/LoginLayout.razor.rz.scp.css */
.page[b-c2j17b02rk] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-c2j17b02rk] {
    flex: 1;
}

.sidebar[b-c2j17b02rk] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-c2j17b02rk] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-c2j17b02rk]  a, .top-row .btn-link[b-c2j17b02rk] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-c2j17b02rk] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-c2j17b02rk] {
        display: none;
    }

    .top-row.auth[b-c2j17b02rk] {
        justify-content: space-between;
    }

    .top-row a[b-c2j17b02rk], .top-row .btn-link[b-c2j17b02rk] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-c2j17b02rk] {
        flex-direction: row;
    }

    .sidebar[b-c2j17b02rk] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-c2j17b02rk] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-c2j17b02rk] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Pages/MainLayout.razor.rz.scp.css */
.page[b-utxnepz6ww] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-utxnepz6ww] {
    flex: 1;
}

.sidebar[b-utxnepz6ww] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-utxnepz6ww] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-utxnepz6ww]  a, .top-row .btn-link[b-utxnepz6ww] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-utxnepz6ww] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-utxnepz6ww] {
        display: none;
    }

    .top-row.auth[b-utxnepz6ww] {
        justify-content: space-between;
    }

    .top-row a[b-utxnepz6ww], .top-row .btn-link[b-utxnepz6ww] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-utxnepz6ww] {
        flex-direction: row;
    }

    .sidebar[b-utxnepz6ww] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-utxnepz6ww] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-utxnepz6ww] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
@import '_content/Blazored.Modal/Blazored.Modal.focqzu07g3.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/Blazorise.RichTextEdit/Blazorise.RichTextEdit.bundle.scp.css';
@import '_content/HorizontBlazorComponents/HorizontBlazorComponents.lozbv54cwp.bundle.scp.css';




/* ============================================================
   AIFM toolbar wiring — CSS-only stopgap until shell rebuild.
   
   Goal: keep MY .h-breadcrumbs visual (white strip with icon design),
   put the REAL functional CMS buttons in that location. Source change
   to render MainPhHeader inside HBreadcrumbs is staged (MainLayout.razor +
   HBreadcrumbs.razor) but can't deploy without rebuilding the Client DLL.
   
   So: visually relocate .header__brand to overlay the h-breadcrumbs toolbar
   area, strip its blue chrome, style its inner buttons as 40×40 transparent
   cells. The real buttons (with their CMS click handlers) appear inside the
   white toolbar strip with my Figma design.
   
   REMOVE THIS BLOCK after rebuild deploys the HBreadcrumbs.razor change.
   ============================================================ */
.header__brand {
  display: flex !important;
  position: fixed !important;
  top: var(--topbar-height, 32px);
  left: 72px;                          /* clear the hamburger cell */
  right: 0;
  height: var(--toolbar-height, 40px) !important;
  min-height: 0 !important;
  max-height: var(--toolbar-height, 40px) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 var(--spacing-md, 12px) !important;
  margin: 0 !important;
  z-index: 50;
  align-items: flex-start;
}
.header__brand::before {
  content: none !important;
  display: none !important;
}
/* display: contents makes these wrapper divs "invisible" to layout — their
   children become direct flex children of .header__brand. Without this, flex
   `order` on each button only sorts within its parent col, not within the
   toolbar overall, AND the col's default Bootstrap padding adds a visible gap. */
.header__brand > .container-fluid,
.header__brand .row,
.header__brand > .col,
.header__brand > .col-auto,
.header__brand .col,
.header__brand .col-auto,
.header__brand .header__item,
.header__brand .header__control-bar {
  display: contents !important;
}
.header__brand button,
.header__brand .btn,
.header__brand a.btn,
.header__brand .button-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--neutral-base, #6E6E6E) !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
/* IMPORTANT: use background-color (not the `background` shorthand) so we don't
   wipe the SVG background-image on hover. */
.header__brand button:hover,
.header__brand .btn:hover,
.header__brand a.btn:hover,
.header__brand .button-icon:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}
.header__brand button i,
.header__brand .btn i,
.header__brand a.btn i,
.header__brand .button-icon i {
  font-size: 16px !important;
  color: inherit !important;
}

/* === Icon mapping for relocated .header__brand toolbar buttons ===
   The functional buttons (1=Add, 2=Edit, 3=Delete, 4=Close) get the Figma SVG
   icons by position. The 5th visual slot — copy + swap, which don't have
   functional handlers yet — is painted as disabled placeholders inside the
   shared ::after, opacity-reduced and pointer-events:none so they're clearly
   non-interactive. Flex order: plus(1) pencil(2) [copy+swap disabled, order 3]
   trash(5). Close hidden. */

/* Hide ALL children/content of the buttons — FA glyphs, hidden text labels,
   sub-icons, sr-only spans, etc. Use the SVG background-image for the visual
   identity. The :hover and :focus pseudos also get the hide so nothing peeks
   through when the button is interacted with. */
.header__brand button *,
.header__brand .btn *,
.header__brand a.btn *,
.header__brand .button-icon *,
.header__brand button:hover *,
.header__brand .btn:hover *,
.header__brand a.btn:hover *,
.header__brand .button-icon:hover *,
.header__brand button:focus *,
.header__brand .btn:focus *,
.header__brand a.btn:focus * {
  display: none !important;
  visibility: hidden !important;
}

/* Also kill any pseudo-elements the .btn-control-bar class may inject */
.header__brand .btn-control-bar::before,
.header__brand .btn-control-bar::after,
.header__brand .btn-control-bar:hover::before,
.header__brand .btn-control-bar:hover::after {
  content: none !important;
  display: none !important;
}

/* Each button: 40×40 with the SVG as a 16×16 centered background */
.header__brand button,
.header__brand .btn,
.header__brand a.btn,
.header__brand .button-icon {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Position-based mapping using the EXACT class structure from the rendered DOM.
   ControlBar render order (from inspector): 1=Add 2=Edit 3=Open(hidden)
   4=Delete 5-7=hidden, 8=Close. .hidden buttons are display:none via CMS already
   and stay invisible. We map slots: 1=plus, 2=pencil, 4=trash, hide 8 (Close). */

/* Make sure hidden ones stay hidden (CMS uses .hidden + disabled attribute) */
.header__brand .btn-control-bar.hidden {
  display: none !important;
}

/* SVG icons — set background-image (only) across all interactive states so the
   icon stays visible on hover/focus/active. background-color is NOT set here,
   so the separate state rules below can color the cells per Figma. */
.header__brand .btn-control-bar:nth-of-type(1),
.header__brand .btn-control-bar:nth-of-type(1):hover,
.header__brand .btn-control-bar:nth-of-type(1):focus,
.header__brand .btn-control-bar:nth-of-type(1):active {
  background-image: url("../img/icon-toolbar-plus.svg?v=20260601c") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  order: 1;
}
.header__brand .btn-control-bar:nth-of-type(2),
.header__brand .btn-control-bar:nth-of-type(2):hover,
.header__brand .btn-control-bar:nth-of-type(2):focus,
.header__brand .btn-control-bar:nth-of-type(2):active {
  background-image: url("../img/icon-toolbar-pencil.svg?v=20260601c") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  order: 2;
}
.header__brand .btn-control-bar:nth-of-type(4),
.header__brand .btn-control-bar:nth-of-type(4):hover,
.header__brand .btn-control-bar:nth-of-type(4):focus,
.header__brand .btn-control-bar:nth-of-type(4):active {
  background-image: url("../img/icon-toolbar-trash.svg?v=20260601c") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  order: 5;
}

/* State-driven background-COLOR (Figma):
   default → transparent, hover → --brand-ghost (#D6E6F5), active → --brand-subtle (#BBD5EF).
   These rules target the same nth-of-type selectors at matching specificity so
   they can win the cascade for each state. */
.header__brand .btn-control-bar:nth-of-type(1),
.header__brand .btn-control-bar:nth-of-type(2),
.header__brand .btn-control-bar:nth-of-type(4) {
  background-color: transparent !important;
  color: var(--neutral-base, #6E6E6E) !important;
  border: none !important;
}
.header__brand .btn-control-bar:nth-of-type(1):hover,
.header__brand .btn-control-bar:nth-of-type(2):hover,
.header__brand .btn-control-bar:nth-of-type(4):hover {
  background-color: var(--brand-ghost, #D6E6F5) !important;
  color: var(--neutral-base, #6E6E6E) !important;
}
.header__brand .btn-control-bar:nth-of-type(1):active,
.header__brand .btn-control-bar:nth-of-type(2):active,
.header__brand .btn-control-bar:nth-of-type(4):active {
  background-color: var(--brand-subtle, #BBD5EF) !important;
  color: var(--neutral-base, #6E6E6E) !important;
}

/* Hide Close (8th button, always rendered) */
.header__brand .btn-control-bar:nth-of-type(8) {
  display: none !important;
}

/* Disabled placeholders (copy + swap) painted as a stacked-background pseudo-element.
   Two 40×40 cells in an 80-wide strip, opacity 0.4 to read as disabled, no pointer
   events so the user can't try clicking. Order 3 places them between pencil and trash. */
.header__brand::after {
  content: '';
  display: block;
  order: 3;
  width: 80px;
  height: 40px;
  background-image:
    url("../img/icon-toolbar-copy.svg?v=20260601a"),
    url("../img/icon-toolbar-swap.svg?v=20260601a");
  background-position:
    12px center,
    52px center;
  background-size:
    16px 16px,
    16px 16px;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  flex-shrink: 0;
}

/* ============================================================
   AIFM toolbar action icons — REBUILT-SHELL PATH
   ============================================================
   When the shell is rebuilt with the source updates, the legacy
   <div class="row header__brand"> wrapper is gone from MainLayout.razor
   AND HBreadcrumbs.razor now renders the MainPhHeader ControlBar inside
   <div class="h-breadcrumbs__actions">. So the rendered DOM becomes:

     <nav class="h-breadcrumbs">
       (::before hamburger)
       <div class="h-breadcrumbs__actions">
         <div class="row">
           <div class="col-auto">
             <div class="header__control-bar">
               <button class="btn-control-bar">  ← icons painted here

   The .header__brand-targeted rules above no longer match (no .header__brand
   in DOM) → no action icons render. This parallel block applies the SAME
   styling to the new .h-breadcrumbs__actions path. After everyone's on the
   rebuilt shell, the .header__brand block above can be deleted.

   This block is layout-WITHIN the toolbar (not relocation): .h-breadcrumbs
   is already at the right position via its own scoped CSS, so no fixed
   positioning needed — just style the inner buttons. */

/* Flatten wrappers so flex `order` works across the whole toolbar */
.h-breadcrumbs__actions,
.h-breadcrumbs__actions > .container-fluid,
.h-breadcrumbs__actions .row,
.h-breadcrumbs__actions > .col,
.h-breadcrumbs__actions > .col-auto,
.h-breadcrumbs__actions .col,
.h-breadcrumbs__actions .col-auto,
.h-breadcrumbs__actions .header__item,
.h-breadcrumbs__actions .header__control-bar {
  display: contents !important;
}

/* Position .h-breadcrumbs__actions as a flex strip inside the toolbar so
   ::after (copy+swap placeholders) and the buttons flow horizontally with
   consistent 40×40 cells. */
.h-breadcrumbs .h-breadcrumbs__actions {
  display: flex !important;
  align-items: center !important;
  height: var(--toolbar-height, 40px) !important;
  margin: 0 !important;
  padding: 0 var(--spacing-md, 12px) !important;
}

/* 40×40 transparent button cells */
.h-breadcrumbs__actions button,
.h-breadcrumbs__actions .btn,
.h-breadcrumbs__actions a.btn,
.h-breadcrumbs__actions .button-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--neutral-base, #6E6E6E) !important;
  box-shadow: none !important;
  flex-shrink: 0;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}
.h-breadcrumbs__actions button:hover,
.h-breadcrumbs__actions .btn:hover,
.h-breadcrumbs__actions a.btn:hover,
.h-breadcrumbs__actions .button-icon:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Hide button content (FA glyphs, sr-only labels) so SVG background reads clean */
.h-breadcrumbs__actions button *,
.h-breadcrumbs__actions .btn *,
.h-breadcrumbs__actions a.btn *,
.h-breadcrumbs__actions .button-icon * {
  display: none !important;
  visibility: hidden !important;
}
.h-breadcrumbs__actions .btn-control-bar::before,
.h-breadcrumbs__actions .btn-control-bar::after {
  content: none !important;
  display: none !important;
}
.h-breadcrumbs__actions .btn-control-bar.hidden {
  display: none !important;
}

/* Icon mapping by position: 1=Add 2=Edit 3=Open(hidden) 4=Delete 5-7=hidden 8=Close */
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(1),
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(1):hover,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(1):focus,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(1):active {
  background-image: url("../img/icon-toolbar-plus.svg?v=20260601c") !important;
  order: 1;
}
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(2),
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(2):hover,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(2):focus,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(2):active {
  background-image: url("../img/icon-toolbar-pencil.svg?v=20260601c") !important;
  order: 2;
}
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(4),
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(4):hover,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(4):focus,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(4):active {
  background-image: url("../img/icon-toolbar-trash.svg?v=20260601c") !important;
  order: 5;
}

/* State-driven hover/active colors */
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(1):hover,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(2):hover,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(4):hover {
  background-color: var(--brand-ghost, #D6E6F5) !important;
}
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(1):active,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(2):active,
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(4):active {
  background-color: var(--brand-subtle, #BBD5EF) !important;
}

/* Hide Close (8th button) */
.h-breadcrumbs__actions .btn-control-bar:nth-of-type(8) {
  display: none !important;
}

/* Disabled placeholders (copy + swap) — same ::after pattern as legacy */
.h-breadcrumbs__actions::after {
  content: '';
  display: block;
  order: 3;
  width: 80px;
  height: 40px;
  background-image:
    url("../img/icon-toolbar-copy.svg?v=20260601a"),
    url("../img/icon-toolbar-swap.svg?v=20260601a");
  background-position:
    12px center,
    52px center;
  background-size:
    16px 16px,
    16px 16px;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  flex-shrink: 0;
}

/* === Figma AIFM sidebar typography ===
   Applies to both parent group items (.accordion-button) and child nav-links.
   Inter 12px / 20px line-height, weight 400, --neutral-strong (#616161) color. */
.sidebar .accordion .accordion-item .accordion-header .accordion-button,
.sidebar .accordion .accordion-item .accordion-body .nav-link,
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button,
.HKDM.main .sidebar .accordion .accordion-item .accordion-body .nav-link {
  color: var(--neutral-strong, #616161) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Active item text color: --brand-strong (#3A72A8) for both expanded groups
   and selected child items. Typography (Inter 12/20 400) stays the same. */
.sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed),
.sidebar .accordion .accordion-item .accordion-body .nav-link.selected,
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed),
.HKDM.main .sidebar .accordion .accordion-item .accordion-body .nav-link.selected {
  color: var(--brand-strong, #3A72A8) !important;
}

/* Group items (parent rows) get a stronger weight (600) and tighter line-height
   (15px / 125%) than child items, per Figma. Override the shared weight-400
   rule I set above. */
.sidebar .accordion .accordion-item .accordion-header .accordion-button,
.HKDM.main .sidebar .accordion .accordion-item .accordion-header .accordion-button {
  font-weight: 600 !important;
  line-height: 15px !important;
}

/* Active expanded group — 3px muted-blue indicator on the LEFT edge spanning
   the whole height of the group (header + expanded body). Per Figma the bar
   is positioned absolute, left: 1px, width ~3px, background --border-brand-muted
   (#A8CBE9). Rendered as a ::before pseudo-element on the accordion-item so it
   covers both the header and the open body in one continuous strip. */
.sidebar .accordion .accordion-item,
.HKDM.main .sidebar .accordion .accordion-item {
  position: relative;
}
.sidebar .accordion .accordion-item:has(> .accordion-header > .accordion-button:not(.collapsed))::before,
.HKDM.main .sidebar .accordion .accordion-item:has(> .accordion-header > .accordion-button:not(.collapsed))::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--border-brand-muted, #A8CBE9);
  pointer-events: none;
  /* High z-index so the bar paints above the accordion-button's hover
     background (which is a positioned element with its own stacking context
     via Bootstrap's `position: relative` on the button). */
  z-index: 5;
}

/* Make the group header's hover background-color render below the indicator
   bar — without this, the !important hover paint on the button would cover
   the absolute ::before since the button forms its own stacking context. */
.sidebar .accordion .accordion-item:has(> .accordion-header > .accordion-button:not(.collapsed)) > .accordion-header,
.HKDM.main .sidebar .accordion .accordion-item:has(> .accordion-header > .accordion-button:not(.collapsed)) > .accordion-header {
  position: relative;
  z-index: 0;
}

/* Remove legacy 7px grey strip (.accordion-body::after) that creates a left
   indent inside the expanded group body. Per Figma the expanded children sit
   flush against the blue indicator with no gap. */
.sidebar .accordion .accordion-item .accordion-body::after,
.HKDM.main .sidebar .accordion .accordion-item .accordion-body::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  background: transparent !important;
}

/* Selected child item — muted-blue bottom border (per Figma: 1px
   --border-brand-muted (#A8CBE9), matching the group indicator bar color).
   Explicitly null out left/right/top borders so nothing reads as a "left
   side" indicator on the selected row (the blue group bar is a separate
   ::before on the accordion-item, not a border on the row). */
.sidebar .accordion .accordion-item .accordion-body .nav-link.selected,
.HKDM.main .sidebar .accordion .accordion-item .accordion-body .nav-link.selected {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--border-brand-muted, #A8CBE9) !important;
}

/* ---------- Figma AIFM content section layout ----------
   Per Figma: column flex with space-between, flex 1 0 0, stretch in cross
   axis, plus a 3px inset shadow on the LEFT edge to subtly separate content
   from the sidebar. Replaces the legacy multi-direction shadow stack that
   the original rule had.
   Per Figma layout tree: Shell/Content > Content/Breadcrumbs > content/area.
   The Content/Breadcrumbs slot is reserved with a ::before placeholder below
   until HBreadcrumbs can be moved into this section in MainLayout.razor
   (source change pending rebuild — see NOTE in HBreadcrumbs.razor). */
.app > main > .content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* placeholder + body stack from top */
  align-items: stretch !important;
  flex: 1 0 0 !important;
  align-self: stretch !important;
  position: relative !important;
  /* Override the legacy hard-coded calc(100vh - 151px) height — that was
     summing pre-AIFM topbar+footer+chrome heights, leaving .content shorter
     than .main's actual content area. Setting height: auto + min-height: 0
     lets the flex parent (.main, display:flex row, default align-items:
     stretch) size this child to match siblings .sidebar and .h-module-rail. */
  height: auto !important;
  min-height: 0 !important;
  /* Per Figma: content background --neutral-ghost (#F5F5F5), slightly darker
     than the breadcrumbs row above (--neutral-tint #FAFAFA) so the two
     bands separate visually. Overrides the legacy #F7F6F2 set higher up. */
  background: var(--neutral-ghost, #F5F5F5) !important;
  /* Inset shadow moved to ::after overlay below — putting it directly on
     .content lets child backgrounds (the breadcrumbs placeholder, tiles,
     etc.) paint over it on the left edge. The overlay sits above everything
     with z-index, so the shadow is visible across the full height including
     the breadcrumb row. */
  box-shadow: none !important;
}

/* Sidebar-edge inset shadow overlay — paints OVER all content (incl. the
   breadcrumbs placeholder + tile grid), so the 3px shadow is consistent
   along the full height of the content section. pointer-events:none keeps
   clicks falling through to the underlying tiles/links. */
.app > main > .content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  box-shadow: inset 3px 0 6px 0 rgba(0, 0, 0, 0.09);
  z-index: 10;
}

/* Content/area (the @Body wrapper inside .content) — per Figma:
     display: flex; align-items: flex-start; flex: 1 0 0; align-self: stretch;
     padding: var(--spacing-lg, 16px) var(--spacing-xs, 4px) 0 var(--spacing-lg, 16px);
     background: var(--content-bg, #F5F5F5);
   The Figma's implicit row + align-items:flex-start meant "page hugs the top
   of the content area". With column flex, that intent becomes
   justify-content: flex-start, and align-items: stretch makes the page child
   fill the full available WIDTH (otherwise it sticks to its intrinsic width
   and the cards bunch up on the left). The 4px right padding accounts for
   the scrollbar gutter. Applied to all container-* variants so any page
   using a Bootstrap container wrapper inherits the AIFM content-area chrome. */
.app > main > .content > .container-fluid,
.app > main > .content > .container-smx,
.app > main > .content > .container-sm,
.app > main > .content > .container-md,
.app > main > .content > .container-lg,
.app > main > .content > .container-xl,
.app > main > .content > .container-xxl {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  flex: 1 1 0 !important; /* shrink:1 — lets the chain clamp inside fixed .content height */
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important; /* override Bootstrap .h-auto !important without conflict */
  min-height: 0 !important;
  /* box-sizing is critical here — without it the 100% width + 16/4 padding
     sum to wider than the parent and the page scrolls horizontally. */
  box-sizing: border-box !important;
  /* Right padding bumped from --spacing-xs (4px Figma) to --spacing-sm (8px)
     per user feedback — Figma's 4px reads too tight on macOS overlay scrollbars
     and module pages that wrap a horizontally-scrolling table (Registar imovine). */
  padding: var(--spacing-lg, 16px) var(--spacing-sm, 8px) 0 var(--spacing-lg, 16px) !important;
  background: var(--content-bg, #F5F5F5) !important;
  /* CSS spec: setting one overflow axis to a non-visible value forces the
     other axis to compute to auto. So setting ONLY overflow-x:hidden silently
     turned overflow-y into auto, and .container-fluid started scrolling
     vertically when the org tree was tall. Set BOTH axes explicitly. */
  overflow: hidden !important;
}

/* Make the @Body child (page root component, e.g. .sh-page) grow to fill the
   column-flex container vertically — without this, height:100% on the page
   root doesn't stretch the way it would in a block parent, leaving a grey
   gap below short-content pages. min-height:0 allows the child to shrink
   inside an overflowing grid. */
.app > main > .content > .container-fluid > *,
.app > main > .content > .container-smx > *,
.app > main > .content > .container-sm > *,
.app > main > .content > .container-md > *,
.app > main > .content > .container-lg > *,
.app > main > .content > .container-xl > *,
.app > main > .content > .container-xxl > * {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* Clamp .content section against ALL overflow. Per the AIFM layout, the
   content area is a fixed viewport-sized region — each module page inside
   manages its OWN internal scrolling (e.g. OrgStruct's .org-tree-scroll,
   SettingsHome's overflow:auto on .sh-main). Without this, when a module's
   inner content tries to grow taller (e.g. a deep org tree), .content's
   legacy overflow:auto kicks in and the whole content area becomes one
   big scroller — scrolling away the breadcrumbs and shadow overlay too.
   overflow:hidden here forces module pages to fill the fixed height and
   handle their own scroll. */
.app > main > .content {
  overflow: hidden !important;
}

/* ---------- Viewport anchor: lock the shell to 100vh ----------
   .org-page (and any other module page) can only have a definite height if
   EVERY ancestor in the chain has a definite height. Out of the box:
     html / body — auto (grows with content)
     .app       — block default (grows with content)
     main       — min-height: calc(...) only — grows past it if content does
   So any tall inner page (deep org tree, long tile list) bubbles up and
   makes the whole document scroll, scrolling away the breadcrumbs and
   toolbar with it. Lock the chain at the root: html/body/.app pin to
   100vh with overflow hidden, .app becomes a flex column, main claims the
   remaining height. Inside main, the existing flex chain (.content →
   .container-fluid → .row → .col → .org-page) then has a real definite
   parent to clamp against, and module-internal scrollers (e.g.
   .org-tree-scroll) become the only thing that scrolls. */
html,
body {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.app {
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.app > main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* ---------- OrgStruct page (Organizacijska struktura) ----------
   The component's scoped CSS pins `.org-page` to
     height: 100%;
     max-height: calc(100vh - 230px);
   That 230px is summed pre-AIFM chrome (legacy topbar + header brand + ribbon
   + footer + breadcrumbs heights). Under our AIFM layout the actual chrome
   adds up to less, so the page either ends short or expands beyond the
   parent depending on tree depth.
   Fix: make .org-page a flex item that fills the available height of .col
   (its parent is now flex-direction:column thanks to the .row/.col override
   below). flex: 1 + min-height: 0 gives a definite capped height so the
   inner .org-tree-scroll's overflow-y: auto kicks in and the tree scrolls
   within its panel instead of pushing the page taller. */
.app > main > .content .org-page,
.app > main > .content .ar-page {
  /* Override the scoped max-height: calc(100vh - 230px) which is pre-AIFM
     chrome math. Use height: 100% — the chain above (.col is
     flex-direction: column with definite cross-axis height from .row) gives
     this a real definite parent to resolve against. Combined with flex: 1
     (in case .col gives it as a flex child), the page is firmly capped at
     .col's height — and the inner scrollers (OrgStruct: .org-tree-scroll,
     Registar imovine: .ar-filter-body / grid area) can finally activate
     their overflow-y: auto. Same fix applies to any module page using the
     pre-AIFM `max-height: calc(100vh - 230px)` pattern. */
  max-height: none !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 0 !important;
}

/* Also ensure the Bootstrap .row > .col wrapping that OrgStruct uses stretches
   to fill the column-flex container. Without this, .row defaults to wrap and
   the .col can size to content rather than full height. */
.app > main > .content > .container-fluid > .row,
.app > main > .content > .container-smx > .row,
.app > main > .content > .container-sm > .row,
.app > main > .content > .container-md > .row,
.app > main > .content > .container-lg > .row,
.app > main > .content > .container-xl > .row,
.app > main > .content > .container-xxl > .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  /* basis: 0 (not auto) — without this the .row sizes from its content,
     which lets a tall .org-page expand the row past .container-fluid. With
     basis: 0 and grow: 1, .row takes ALL available height from
     .container-fluid, definite. */
  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}
.app > main > .content > .container-fluid > .row > .col,
.app > main > .content > .container-smx > .row > .col,
.app > main > .content > .container-sm > .row > .col,
.app > main > .content > .container-md > .row > .col,
.app > main > .content > .container-lg > .row > .col,
.app > main > .content > .container-xl > .row > .col,
.app > main > .content > .container-xxl > .row > .col {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* The 28px breadcrumb row at the top of .content is rendered by the real
   HBreadcrumbs component (Part="trail", mounted in MainLayout's section.content);
   styling lives in HBreadcrumbs.razor.css (.h-breadcrumbs-trail). */

/* "Zapisa po stranici" Telerik popup (Registar imovine): selekcija u brand
   plavoj umjesto crvene teme. Popup se renderira na body razini pa pravila
   moraju biti globalna — scoped css komponente ga ne dohvaća. */
.ar-pagesize-pop .k-list-item.k-selected,
.ar-pagesize-pop .k-list-item.k-selected.k-hover {
  background-color: var(--brand-tint, #E7F4FD);
  color: var(--brand-strong, #3A72A8);
}

.ar-pagesize-pop .k-list-item.k-hover {
  background-color: var(--neutral-tint, #FAFAFA);
}

/* ============================================================================
   IM filter "Expiry within N days" — <TelerikDropDownList class="ar-filter-dd">.
   Skinned to match the sibling InsMultiCombo (.mc-control) filters in the same
   panel (Partner / Kategorija / Tip licence) so every filter control lines up:
   30px tall, 13px Inter, #3D3D3D text, #D6D6D6 border, purple focus accent.
   Telerik renders k-* DOM, so (like .ar-footer-pager / .ar-pagesize-pop above)
   these rules are global — the trigger lives in the component, the popup on the
   body.
   ============================================================================ */
.ar-filter-dd.k-dropdownlist {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid var(--border-muted, #D6D6D6);
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
  font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.ar-filter-dd .k-input-inner {
  padding: 0 8px;
  font-size: 13px;
  color: var(--neutral-strong, #3D3D3D);
}
/* Chevron — drop Telerik's button chrome, keep just the caret glyph. */
.ar-filter-dd .k-input-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 26px;
  color: var(--neutral-strong, #3D3D3D);
}
/* Hover/focus — purple accent, matching .mc-control:hover / .mc-has-selection. */
.ar-filter-dd.k-dropdownlist:hover,
.ar-filter-dd.k-dropdownlist.k-focus {
  border-color: var(--primary-base, #54389B);
  box-shadow: none;
}

/* Popup list (body-level) — Inter, neutral hover, purple selected (combo accent). */
.ar-filter-dd-pop .k-list,
.ar-filter-dd-pop .k-list-content {
  font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 13px;
}
.ar-filter-dd-pop .k-list-item { color: var(--neutral-strong, #3D3D3D); }
.ar-filter-dd-pop .k-list-item.k-selected,
.ar-filter-dd-pop .k-list-item.k-selected.k-hover {
  background-color: var(--neutral-tint, #FAFAFA);
  color: var(--primary-base, #54389B);
}
.ar-filter-dd-pop .k-list-item.k-hover {
  background-color: var(--neutral-tint, #FAFAFA);
}

/* ============================================================================
   IM filter multi-selects — <TelerikMultiSelect class="mc-dd"> (InsMultiCombo).
   Skinned to match the legacy hand-rolled .mc-control: 30px box, #D6D6D6 border,
   13px Inter / #3D3D3D, purple focus accent, a single condensed summary tag shown
   as plain text ("Prva +N"), and a right-side chevron. The body-level popup is
   styled via .mc-dd-pop. Global because Telerik renders k-* DOM + a body popup.
   ============================================================================ */
.mc-dd.k-multiselect {
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
  border: 1px solid var(--border-muted, #D6D6D6);
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
  padding: 0 24px 0 6px;   /* room for the chevron on the right */
  font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4' fill='none'><path d='M1 0.5L4 3.5L7 0.5' stroke='%236E6E6E' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.mc-dd.k-multiselect:hover,
.mc-dd.k-multiselect.k-focus {
  border-color: var(--primary-base, #54389B);
  box-shadow: none;
}
.mc-dd .k-input-inner {
  font-size: 13px;
  color: var(--neutral-strong, #3D3D3D);
  padding: 0 2px;
}
/* Single summary tag rendered as plain text, not a chip pill. */
.mc-dd .k-chip {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--neutral-strong, #3D3D3D);
}
.mc-dd .k-chip .k-chip-content { padding: 0; }
/* No inline clear ×: hide both the summary tag's remove × and Telerik's separate
   clear-value × (the panel's Reset button + active-filter chips own clearing). */
.mc-dd .k-chip-actions,
.mc-dd .k-clear-value { display: none !important; }

/* Popup list (body-level) — Inter, neutral hover, purple selected (combo accent). */
.mc-dd-pop .k-list,
.mc-dd-pop .k-list-content {
  font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 13px;
}
/* Default (non-virtual) lists: items wrap so the FULL label is always readable —
   used for the browse-able combos (Klasa, Mjesta troška, Organizacija, …).
   height:auto !important overrides the fixed ItemHeight Telerik otherwise applies,
   so a wrapped 2–3 line label grows its row instead of overflowing onto the next. */
.mc-dd-pop .k-list-item {
  color: var(--neutral-strong, #3D3D3D);
  height: auto !important;
  min-height: 32px;
  box-sizing: border-box;
  padding: 6px 8px;
  line-height: 1.35;
  white-space: normal;
}
/* Virtualized lists (very large, e.g. 12.6k employees): virtual scroll positions
   every row at a fixed ItemHeight (32px), so each item MUST be exactly one line of
   that height — long labels clamp to a single line + ellipsis (you filter by typing
   in these). Without this, wrapped rows overflow their slot and overlap. */
.mc-dd-pop--virtual .k-list-item {
  display: block;
  height: 32px !important;
  min-height: 32px;
  line-height: 32px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-dd-pop .k-list-item.k-selected,
.mc-dd-pop .k-list-item.k-selected.k-hover {
  background-color: var(--neutral-tint, #FAFAFA);
  color: var(--primary-base, #54389B);
}
.mc-dd-pop .k-list-item.k-hover {
  background-color: var(--neutral-tint, #FAFAFA);
}

/* ============================================================================
   Filter free-text search — <TelerikTextBox class="ar-filter-search-tb">.
   Skinned to match the legacy .ar-filter-search: 40px white box, thin border,
   left magnifier icon. The built-in ShowClearButton provides the right-side
   clear ×, and DebounceDelay replaces the old manual debounce. Global (k-* DOM).
   ============================================================================ */
.ar-filter-search-tb.k-input,
.ar-filter-search-tb.k-textbox {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid var(--border-muted, #E0E0E0);
  border-radius: var(--radius-sm, 4px);
  background: #FFFFFF;
  box-shadow: none;
  font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.ar-filter-search-tb .k-input-inner {
  padding: 0 8px 0 32px;       /* room for the magnifier on the left */
  font-size: 13px;
  color: #212121;
  background-image: url("/img/figma-asset/search-icon.svg");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px 16px;
}
.ar-filter-search-tb.k-input:focus-within,
.ar-filter-search-tb.k-focus {
  border-color: var(--border-muted, #E0E0E0);
  box-shadow: 0 0 0 2px var(--color-white, #FFFFFF),
              0 0 0 4px var(--color-blue-200, #BBD5EF);
}
.ar-filter-search-tb .k-clear-value { color: var(--neutral-base, #6E6E6E); }

/* ============================================================================
   Filter checkboxes — <TelerikCheckBox> inside <label class="ar-filter-check">.
   Re-skins Telerik's k-checkbox with the SAME Figma glyph the native input had
   (16×16, 4px radius, #6E6E6E outline, white fill; checked = #6CA5D9 + white
   tick) so the migration is visually identical. Global because Telerik's input
   doesn't carry the component's scoped b-* attribute. Same look reused by the
   IM screens' status/severity checkbox lists. */
.ar-filter-check .k-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid var(--neutral-base, #6E6E6E);
  border-radius: var(--radius-radius-md, 4px);
  background: var(--neutral-default, #FFFFFF);
  cursor: pointer;
}
.ar-filter-check .k-checkbox:checked {
  background-color: var(--brand-base, #6CA5D9);
  border-color: var(--brand-base, #6CA5D9);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6.2L4.8 8.5L9.5 3.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.ar-filter-check .k-checkbox::before { content: none !important; }

/* Filter radio group — <TelerikRadioGroup class="ar-filter-radio"> matching the
   .ar-filter-check rows: 13px label, brand-blue selected dot, tight vertical list. */
.ar-filter-radio .k-radio-list { gap: 2px; }
.ar-filter-radio .k-radio-item { padding: 4px; }
.ar-filter-radio .k-radio-label {
  font-size: 13px;
  color: var(--text-primary, #1a1a1a);
  margin-inline-start: 8px;
}
.ar-filter-radio .k-radio:checked {
  border-color: var(--brand-base, #6CA5D9);
  background-color: var(--brand-base, #6CA5D9);
}

/* ============================================================================
   Asset detail sub-tabs — <TelerikTabStrip class="ar-detail-tabs-ts"> skinned to
   match the legacy .ar-detail-tab look: small 12px tabs, brand-wash active tab
   with brand-strong text + a 3px bottom indicator, and a flush content area.
   ============================================================================ */
.ar-detail-tabs-ts .k-tabstrip-items,
.ar-detail-tabs-ts .k-tabstrip-items .k-item {
  border: none;
}
.ar-detail-tabs-ts .k-tabstrip-items .k-link {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--neutral-strong, #616161);
}
.ar-detail-tabs-ts .k-tabstrip-items .k-item:hover .k-link {
  background: var(--neutral-tint, #FAFAFA);
  color: var(--brand-strong, #3A72A8);
}
.ar-detail-tabs-ts .k-tabstrip-items .k-item.k-active .k-link {
  background: var(--brand-wash, #F3F7FC);
  color: var(--brand-strong, #3A72A8);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--brand-base, #6CA5D9);
}
/* Flush content area — drop Telerik's default tab-content padding/border. */
.ar-detail-tabs-ts .k-tabstrip-content,
.ar-detail-tabs-ts > .k-content {
  border: none;
  padding: 0;
  background: transparent;
}

/* ============================================================================
   OrgStruct tree status filter — <TelerikButtonGroup class="org-tree-filter-bg">
   skinned to match the legacy .org-tree-filter-btn segmented control: 3 equal-
   width 21px buttons, 8px gap, each individually rounded, selected = dark-grey
   (#616161) fill + white text. (hModule Settings, served via global app.css.)
   ============================================================================ */
.org-tree-filter-bg.k-button-group {
  display: flex;
  gap: var(--spacing-sm, 8px);
  align-self: stretch;
  width: 100%;
}
.org-tree-filter-bg.k-button-group .k-button {
  flex: 1 0 0;
  height: 21px;
  min-width: 0;
  padding: 4px 8px;
  margin: 0 !important;
  border-radius: var(--radius-radius-md, 4px) !important;
  border: 0.5px solid var(--neutral-base, #6E6E6E) !important;
  background: var(--neutral-default, #FFFFFF);
  color: var(--neutral-deep, #212121);
  font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}
.org-tree-filter-bg.k-button-group .k-button:hover:not(.k-selected) {
  background: var(--neutral-ghost, #F5F5F5);
}
.org-tree-filter-bg.k-button-group .k-button.k-selected {
  background: var(--neutral-strong, #616161);
  color: var(--neutral-default, #FFFFFF);
  border-color: var(--neutral-base, #6E6E6E) !important;
}

/* ============================================================================
   Settings right-click menu — TelerikContextMenu restyled to the dark Figma
   design: #424242 popup (12px radius), white 14px items with per-item icons,
   and a full-red (#D32F2F) destructive item. Item visuals live on the
   ItemTemplate span .octx; the popup is body-level so this is global. Shared by
   OrgStruct + (after cascade) the helper screens.
   ============================================================================ */
.k-menu-popup .k-context-menu,
div.k-menu-popup ul.k-context-menu.k-menu-group,
.org-ctx-menu {
  padding: 4px !important;
  padding-top: 4px !important;
  padding-right: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 4px !important;
  padding-block-start: 4px !important;
  padding-block-end: 4px !important;
  padding-inline-start: 4px !important;
  padding-inline-end: 4px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  background: #424242 !important;
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.21) !important;
}
/* Items must fill to the outer 8px padding — kill every inset Telerik's inner
   menu wrappers add, so the only padding is the 8px on .k-context-menu itself and
   the item background sits 8px from the menu edge on all sides. */
.k-context-menu .k-menu-group,
.k-context-menu .k-menu-scroll-wrapper,
.k-context-menu .k-group,
.k-context-menu .k-menu-item,
.k-context-menu .k-menu-link,
.k-context-menu .k-menu-link-text,
.k-context-menu > ul {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
/* Each item row must span the full content width so its background sits 8px from
   the menu edge (no shrink-wrap gap from Telerik's flex link). */
.k-context-menu .k-menu-item,
.k-context-menu .k-menu-link,
.k-context-menu .k-menu-link-text {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
.k-context-menu .k-item,
.k-context-menu .k-menu-item { background: transparent !important; border: none !important; }
.k-context-menu .k-link,
.k-context-menu .k-menu-link { padding: 0 !important; background: transparent !important; border: none !important; }
.k-context-menu .k-menu-link-text { width: 100%; }

.octx {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.k-context-menu .k-item:hover .octx,
.k-context-menu .k-menu-item:hover .octx,
.k-context-menu .k-menu-item.k-hover .octx { background: #212121; }

/* leading icons */
.octx--edit::before,
.octx--duplicate::before,
.octx--move::before,
.octx--delete::before {
  content: "";
  display: inline-block;
  height: 12px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.octx--edit::before      { width: 12px; background-image: url("/img/figma-asset/edit-white.svg"); }
.octx--duplicate::before { width: 12px; background-image: url("/img/figma-asset/duplicate-white.svg"); }
.octx--move::before      { width: 12px; background-image: url("/img/figma-asset/move-white.svg"); }
.octx--delete::before    { width: 11px; background-image: url("/img/figma-asset/trash-white.svg"); }
.octx--add_child::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}

/* destructive item (Obriši / Deaktiviraj) — full red, separated from the actions
   above by a divider (mirrors the divider under the add item). */
.octx--delete { background: #D32F2F; position: relative; margin-top: 16px; }
.octx--delete::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -8px;
  height: 1px;
  background: #6E6E6E;
  opacity: 0.5;
  border-radius: 1px;
}
.k-context-menu .k-item:hover .octx--delete,
.k-context-menu .k-menu-item:hover .octx--delete,
.k-context-menu .k-menu-item.k-hover .octx--delete { background: #B71C1C; }
.octx--add_child { position: relative; margin-bottom: 16px; }
.octx--add_child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 1px;
  background: #6E6E6E;
  opacity: 0.5;
  border-radius: 1px;
}

/* Kill Telerik's default white popup-wrapper chrome AROUND the dark menu — scoped
   with :has so other Telerik popups (dropdowns, multiselects) are untouched. The
   dark fill/radius/shadow live on .k-context-menu itself (above). */
.k-popup:has(.k-context-menu),
.k-child-animation-container:has(.k-context-menu),
.k-menu-popup {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Remove the focus/selected ring + any item border (the box around the first item). */
.k-context-menu .k-item,
.k-context-menu .k-menu-item,
.k-context-menu .k-link,
.k-context-menu .k-menu-link,
.k-context-menu .k-item:focus,
.k-context-menu .k-menu-item:focus,
.k-context-menu .k-link:focus,
.k-context-menu .k-menu-link:focus,
.k-context-menu .k-menu-item.k-focus,
.k-context-menu .k-menu-link.k-focus,
.k-context-menu .k-menu-item.k-selected,
.k-context-menu .k-menu-link.k-selected {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ============================================================================
   AIFM sidebar menu items — leading marker + blue active state. NO masks (a prior
   mask-based attempt rendered invisible) and NO flex (an earlier flex attempt detached).
   The marker is a plain inline-block ::before before the text: the default is a pure-CSS
   coloured circle (background-color + border-radius — cannot fail to paint); the dashboard
   page (URL slug 'dashboard') swaps it for a normal background-image SVG. Active item turns
   blue #1E70B8 (text, left bar, and marker), matching the module rail. GLOBAL app.css
   (served live → hard-refresh). !important on the active text/border beats the scoped
   .nav-link.selected[b-xxx] rule; the ::before has no scoped competitor. */
/* The link gets left padding to reserve space for the marker, and position:relative so the
   absolutely-positioned ::before anchors to it. Absolute positioning takes the marker OUT of
   text flow — so the higher-specificity rule that forces ::before to display:block can no
   longer push the text onto a second line. */
.main .sidebar .accordion .accordion-item .accordion-body .nav-link {
    position: relative !important;
    padding-left: 36px !important;
}
.main .sidebar .accordion .accordion-item .accordion-body .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #B0B0B0 !important;
}

/* dashboard page (slug 'dashboard') → 2x2 grid glyph (plain background-image, no mask) */
.main .sidebar .accordion .accordion-item .accordion-body .nav-link[href*="dashboard"]::before {
    left: 10px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 0 !important;
    background: url("/img/figma-asset/icon-dashboard.svg") center / 16px 16px no-repeat !important;
}

/* active item → blue text + blue marker (keeps the existing light-blue active strip) */
.main .sidebar .nav-link.selected {
    color: #1E70B8 !important;
    border-left-color: #1E70B8 !important;
    font-weight: 600;
}
.main .sidebar .accordion .accordion-item .accordion-body .nav-link.selected::before {
    background: #1E70B8 !important;
}
.main .sidebar .accordion .accordion-item .accordion-body .nav-link.selected[href*="dashboard"]::before {
    background: url("/img/figma-asset/icon-dashboard-active.svg") center / 16px 16px no-repeat !important;
}

/* ── DynForm searchable ComboBox (HComboBox) popup ─────────────────────────────────────────
   Options like "1 — Neproizvedena dugotrajna imovina" were clipped because the popup is the
   (narrow) field width and items don't wrap. Keep it at the field width (a wider popup overflows
   the modal → horizontal scroll), let long labels WRAP, shrink the font a touch, and scroll
   vertically. Global override — no shared-component edit. */
.h-combobox .dropdown-menu,
.h-combobox .dropdown-menu.show {
    width: 100% !important;
    max-height: 340px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.h-combobox .dropdown-menu .dropdown-item {
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.3;
    font-size: 13px !important;
    padding: 8px 12px !important;
}