@import url("_supertrader.d919a7e93b57.css");
@import url("_buttons.213624687c06.css");
@import url("_layout_section.ed84ff160c01.css");
@import url("_layout_field.379b94110cd3.css");
@import url("_print.faa0958705cf.css");

:root {
  --blue: #4e73df;
  --bs-blue: var(--blue);
  --indigo: #6610f2;
  --bs-indigo: var(--indigo);
  --purple: #6f42c1;
  --bs-purple: var(--purple);
  --pink: #e83e8c;
  --bs-pink: var(--pink);
  --red: #e74a3b;
  --bs-red: var(--red);
  --orange: #fd7e14;
  --bs-orange: var(--orange);
  --yellow: #f6c23e;
  --bs-yellow: var(--yellow);
  --green: #1cc88a;
  --bs-green: var(--green);
  --teal: #20c9a6;
  --bs-teal: var(--teal);
  --cyan: #36b9cc;
  --bs-cyan: var(--cyan);
  --white: #fff;
  --bs-white: var(--white);
  --gray: #858796;
  --bs-gray: var(--gray);
  --gray-dark: #5a5c69;
  --bs-gray-dark: var(--gray-dark);
  --primary: #333; /*#4e73df;*/
  --bs-primary: var(--primary);
  --primary-rgb: 78, 115, 223;
  --bs-primary-rgb: var(--primary-rgb);
  --secondary: #858796;
  --bs-secondary: var(--secondary);
  --success: #1cc88a;
  --bs-success: var(--success);
  --info: #36b9cc;
  --bs-info: var(--info);
  --warning: #f6c23e;
  --bs-warning: var(--warning);
  --danger: #e74a3b;
  --bs-danger: var(--danger);
  --light: #f8f9fc;
  --bs-light: var(--light);
  --dark: #5a5c69;
  --bs-dark: var(--dark);
  --success-soft: #d2f4e8;
  --bs-success-soft: var(--success-soft);

  /* MG - this works here */
  /*--bs-success-bg-subtle: ;*/

  --bs-body-color: var(--gray);

  /*--bs-font-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 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;*/

  --compact-hide: "block";
  --mb4-compact-0: 1.5rem;
  --compactable-padding: 0.75rem;
  --compact-1-to-25: 1rem;
  /*--color-bg: #f8f9fc;*/
  --color-menu: #4e73df;
  /*--color-link: #4e73df;*/
  /*--color-link-hover: #224abe;*/
  --card-bg: #fff;
  --card-footer-bg: #f8f9fc;
  --navbar-bg: #fff;
  --tbl-border: #e3e6f0;
  --text-lbl: #999; /* #b7b9cc; */
  --text-data: #333; /* #3a3b45; */
  /*--header-text: #0033b5;*/

  /* these should stay sync'd with charts.py chart_colors */
  --chart-color-1: #67c7c1; /* teal-ish? */
  --chart-color-2: #f5a571; /* light orange */
  --chart-color-3: #fed58c; /* yellow-ish */
  --chart-color-4: #96d9b0; /* green-ish */
  --chart-color-5: #73b5e8; /* light-blue */
  --chart-color-6: #80d2f2; /* light blue-green? */
  --chart-color-7: #ff8f98; /* light red-ish */
  --chart-color-8: #a6b2ed; /* other blue */
  --chart-color-9: #d7b2d4; /* light purple */
  --chart-color-10: #aaaaaa; /* light gray */
}

.card-header {
  --bs-card-border-width: 0;
}

[data-comfort="compact"] {
  --mb4-compact-0: 0rem;
  --compact-hide: "none";
  --compact-1-to-25: 0.25rem;
  --compactable-padding: 0rem;
  --table-th: #5a5c69;
}

[data-theme="dark"] {
  --color-bg: #000;
  --color-menu: #5a5c69;
  --card-bg: #121212;
  --card-footer-bg: #5a5c69;
  --navbar-bg: #000;
  --table-th: #ffffff;
}

a {
  color: var(--color-link);
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

a.hover-primary:hover {
  color: var(--lp-button-primary-bg);
  text-decoration: none;
}

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

a:not([href]):not([tabindex]):not(.btn):hover,
a:not([href]):not([tabindex]):not(.btn):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.border-bottom-success {
  border-bottom: 0.25rem solid #1cc88a !important;
}

.border-left-info {
  border-left: 0.25rem solid #36b9cc !important;
}

.border-bottom-info {
  border-bottom: 0.25rem solid #36b9cc !important;
}
.border-top-info {
  border-top: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
  border-left: 0.25rem solid #f6c23e !important;
}

.border-bottom-warning {
  border-bottom: 0.25rem solid #f6c23e !important;
}

.border-left-danger {
  border-left: 0.25rem solid #e74a3b !important;
}

.border-bottom-danger {
  border-bottom: 0.25rem solid #e74a3b !important;
}

.border-left-light {
  border-left: 0.25rem solid #f8f9fc !important;
}

.border-bottom-light {
  border-bottom: 0.25rem solid #f8f9fc !important;
}

.border-left-dark {
  border-left: 0.25rem solid #5a5c69 !important;
}

/* All LevPro styles, built on: */
/*!
 * Start Bootstrap - SB Admin 2 v4.0.7 (https://startbootstrap.com/template-overviews/sb-admin-2)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/blob/master/LICENSE)
 */

.img-profile-small {
  object-fit: cover;
  border-radius: 25% !important;
  height: 2rem;
  width: 2rem;
}

.img-profile-medium {
  object-fit: cover;
  border-radius: 25% !important;
  height: 50px;
  width: 50px;
}

#news-articles div.card-body {
  display: var(--compact-hide) !important;
}
nav.topbar {
  background-color: var(--navbar-bg);
}

.text-lbl {
  letter-spacing: -0.25px;
  color: var(--text-lbl) !important;
}
.text-data {
  color: var(--text-data) !important;
}
.header-text {
  color: var(--header-text) !important;
}

.emoji-reaction {
  transition: all 0.2s ease-in-out;
}

.emoji-reaction:hover {
  cursor: pointer;
  font-size: 1.5em;
}

.card-hover:hover {
  background-color: #eaecf4;
}

.pointer:hover {
  cursor: pointer;
}

.shrunk {
  max-height: 150px;
  transition: max-height 1000ms linear;
  overflow: hidden;
}
.shrunk-to-zero-height {
  max-height: 0px;
  transition: max-height 1000ms linear;
  overflow: hidden;
}
.shrunk.expanded,
.shrunk-to-zero-height.expanded {
  max-height: calc(100vh - 300px);
  /* max-height: 800px; */
  overflow-y: auto;
}

.shrunk i:before,
.shrunk-to-zero-height {
  content: "\f146";
}

.shrunk.expanded i:before,
.shrunk-to-zero-height.expanded i:before {
  content: "\f0fe";
}

p.MsoNormal {
  /* overwrite things pasted from Outlook */
  margin: 0px;
}

/* make an input box look like a star, used in the file manager and fav funds */
.star {
  visibility: hidden;
  cursor: pointer;
}
.star:before {
  content: "\2606";
  color: grey;
  font-size: 2rem;
  position: absolute;
  visibility: visible;
  margin-top: -16px;
  margin-left: -4px;
}
.star:hover:before {
  color: #ffb300;
}
.star:checked:before {
  content: "\2605";
  color: #ffb300;
}
.star:checked:hover:before {
  content: "\2606";
}

/* star ratings from here: https://codepen.io/BlackShabat/pen/pJZooM */
.star-rating {
  font-size: 0;
}
.star-rating__wrap {
  display: inline-block;
  font-size: 1rem;
}
.star-rating__wrap:after {
  content: "";
  display: table;
  clear: both;
}
.star-rating__ico {
  float: right;
  padding-left: 2px;
  cursor: pointer;
  color: #ffb300;
}
.star-rating__ico:last-child {
  padding-left: 0;
}
.star-rating__input {
  display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before {
  content: "\f005";
}

.semi-transparent {
  opacity: 0.6;
}
.semi-transparent:hover {
  opacity: 1;
}

/* similar styles to jexcel, but not exact.  used to make vanilla tables look the same */
.excel {
  border-collapse: separate;
  table-layout: fixed;
  white-space: nowrap;
  empty-cells: show;
  border: 0;
  background-color: #fff;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.excel > tbody > tr > td {
  font-size: 0.9rem;
  color: black;
  text-align: right;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 4px;
  height: 23px;
}

.excel > tbody > tr > td:first-child {
  background-color: #f3f3f3;
  text-align: left;
  vertical-align: middle;
  z-index: 2;
}
.excel > tbody > tr > td:first-child > * {
  vertical-align: middle;
}
.excel > thead > tr > td {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background-color: #f3f3f3;
  padding: 2px;
  color: black;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  top: 0;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: center right 5px;
}

/* Used in chat and stream to separate days with a line including text */
.hr-sect {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  color: rgba(0, 0, 0, 0.35);
  margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
  content: "";
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.35);
  height: 1px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px 8px;
}

.plusminus i:before {
  content: "\f146";
}

.plusminus.collapsed i:before {
  content: "\f0fe";
}

@media (max-width: 850px) {
  #recent_secs {
    display: none;
  }
  .lp-footer {
    display: none;
  }
}

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

body {
  margin: 0;
  font-family:
    "Nunito",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  height: 100%;
  min-height: 100%;
  color: var(--gray);
  text-align: left;
}

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

.btn-group-xs > .btn,
.btn-xs {
  padding: 0.25rem 0.4rem;
  font-size: 0.875rem;
  line-height: 1;
  border-radius: 0.2rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #2e2f37;
  text-decoration: none;
  background-color: #f8f9fc;
}

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

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

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

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

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

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

.input-group-text {
  color: #6e707e;
}

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

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--blue);
}

.card-body {
  /* MG - BS5 no longer sets position relative */
  position: relative;
  padding: var(--compactable-padding);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  list-style: none;
  background-color: #eee;
  border-radius: 0.35rem;
}

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

.breadcrumb-item + .breadcrumb-item::before {
  float: none;
  display: inline-block;
  padding-right: 0.5rem;
  color: #858796;
  content: "/";
}

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

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

.breadcrumb-item.active {
  color: #858796;
}

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

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

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

.badge:empty {
  display: none;
}

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

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

.badge-primary {
  color: #fff;
  background-color: #4e73df;
}

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

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

.badge-primary-soft {
  color: #212832;
  background-color: #dae7fb;
}

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

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

a.badge-secondary:focus,
a.badge-secondary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
}

.badge-success {
  color: #fff;
  background-color: #1cc88a;
}

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

a.badge-success:focus,
a.badge-success.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
}

.badge-info {
  color: #fff;
  background-color: #36b9cc;
}

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

a.badge-info:focus,
a.badge-info.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
}

.badge-warning {
  color: #fff;
  background-color: #f6c23e;
}

a.badge-warning:hover,
a.badge-warning:focus {
  color: #fff;
  background-color: #f4b30d;
}

a.badge-warning:focus,
a.badge-warning.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
}

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

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

a.badge-danger:focus,
a.badge-danger.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
}

.badge-light {
  color: #3a3b45;
  background-color: #f8f9fc;
}

a.badge-light:hover,
a.badge-light:focus {
  color: #3a3b45;
  background-color: #d4daed;
}

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

.badge-dark {
  color: #fff;
  background-color: #5a5c69;
}

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

a.badge-dark:focus,
a.badge-dark.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
}

.alert-success {
  color: #0f6848;
  background-color: var(--success-soft);
  border-color: #bff0de;
}

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

.alert-success .alert-link {
  color: #093b29;
}

.alert-info {
  color: #1c606a;
  background-color: #d7f1f5;
  border-color: #c7ebf1;
}

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

.alert-info .alert-link {
  color: #113b42;
}

.alert-warning {
  color: #806520;
  background-color: #fdf3d8;
  border-color: #fceec9;
}

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

.alert-warning .alert-link {
  color: #574516;
}

.alert-danger,
.alert-error {
  color: #78261f;
  background-color: #fadbd8;
  border-color: #f8ccc8;
}

.alert-danger hr,
.alert-error hr {
  border-top-color: #f5b7b1;
}

.alert-danger .alert-link,
.alert-error .alert-link {
  color: #4f1915;
}

.toast {
  --bs-toast-max-width: 500px;
  width: unset; /* bs5 uses the max-width variable to set the width, which is stupid.  */
  min-width: 300px;
}

.toast-body {
  --bs-toast-padding-x: 0;
}

/* MG - BS5 replaced these with .fw-* but we ag grid context menu was benefiting from it */
.font-weight-light {
  font-weight: 300 !important;
}

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

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

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

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

.font-italic {
  /* MG - BS5 now uses .fst-italic */
  font-style: italic !important;
}

.font-normal {
  /* MG - BS5 now uses .fst-normal */
  font-style: normal !important;
}

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

.text-primary {
  color: var(--lp-color-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--lp-color-primary) !important;
}

a.text-primary:hover {
}

.text-secondary {
  color: #858796 !important;
}

a.text-secondary:hover,
a.text-secondary:focus {
  color: #60616f !important;
}

.text-success {
  color: #1cc88a !important;
}

a.text-success:hover,
a.text-success:focus {
  color: #13855c !important;
}

.text-info {
  color: #36b9cc !important;
}

a.text-info:hover,
a.text-info:focus {
  color: #258391 !important;
}

.text-warning {
  color: #f6c23e !important;
}

a.text-warning:hover,
a.text-warning:focus {
  color: #dda20a !important;
}

.text-danger {
  color: #e74a3b !important;
}

a.text-danger:hover,
a.text-danger:focus {
  color: #be2617 !important;
}

.text-body {
  color: #858796 !important;
}

.text-muted {
  color: #858796 !important;
}

a:focus {
  outline: none;
}

#wrapper #content {
  flex: 1 1 auto;
  padding: 1rem 1rem 0 1rem;
  position: relative; /* need this so that z-index works and right side-bar doesn't steal clicks  */
}

.sticky-footer {
  width: 100%;
  position: fixed;
  bottom: 0px;
}

.container,
.container-fluid {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@-webkit-keyframes growIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes growIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animated--grow-in,
.sidebar .nav-item .collapse {
  -webkit-animation-name: growIn;
  animation-name: growIn;
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
  -webkit-animation-timing-function:
    transform cubic-bezier(0.18, 1.25, 0.4, 1),
    opacity cubic-bezier(0, 1, 0.4, 1);
  animation-timing-function:
    transform cubic-bezier(0.18, 1.25, 0.4, 1),
    opacity cubic-bezier(0, 1, 0.4, 1);
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated--fade-in {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
  -webkit-animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
  animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
}

.bg-gradient-primary {
  background-color: var(--color-menu);
  background-image: linear-gradient(180deg, var(--color-menu) 10%, #224abe 100%);
  background-size: cover;
}

.bg-gradient-secondary {
  background-color: #858796;
  background-image: linear-gradient(180deg, #858796 10%, #60616f 100%);
  background-size: cover;
}

.bg-gradient-success {
  background-color: #1cc88a;
  background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
  background-size: cover;
}

.bg-gradient-info {
  background-color: #36b9cc;
  background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
  background-size: cover;
}

.bg-gradient-warning {
  background-color: #f6c23e;
  background-image: linear-gradient(180deg, #f6c23e 10%, #dda20a 100%);
  background-size: cover;
}

.bg-gradient-danger {
  background-color: #e74a3b;
  background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
  background-size: cover;
}

.bg-gradient-light {
  background-color: #f8f9fc;
  background-image: linear-gradient(180deg, #f8f9fc 10%, #c2cbe5 100%);
  background-size: cover;
}

.bg-gradient-dark {
  background-color: #5a5c69;
  background-image: linear-gradient(180deg, #5a5c69 10%, #373840 100%);
  background-size: cover;
}

.bg-gray-100 {
  background-color: #f8f9fc !important;
}

.bg-gray-200 {
  background-color: #eaecf4 !important;
}

.bg-gray-300 {
  background-color: #dddfeb !important;
}

.bg-gray-400 {
  background-color: #d1d3e2 !important;
}

.bg-gray-500 {
  background-color: #b7b9cc !important;
}

.bg-gray-600 {
  background-color: #858796 !important;
}

.bg-gray-700 {
  background-color: #6e707e !important;
}

.bg-gray-800 {
  background-color: #5a5c69 !important;
}

.bg-gray-900 {
  background-color: #3a3b45 !important;
}

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

.text-xs {
  font-size: 0.7rem;
}

.text-sm {
  font-size: 0.85rem;
}

.text-lg {
  font-size: 1.2rem;
}

.text-xl {
  font-size: 1.5rem;
}

.text-gray-100 {
  color: #f8f9fc !important;
}

.text-gray-200 {
  color: #eaecf4 !important;
}

.text-gray-300 {
  color: #dddfeb !important;
}

.text-gray-400 {
  color: #d1d3e2 !important;
}

.text-gray-500 {
  color: #b7b9cc !important;
}

.text-gray-600 {
  color: #858796 !important;
}

.text-gray-700 {
  color: #6e707e !important;
}

.text-gray-800 {
  color: #5a5c69 !important;
}

.text-gray-900 {
  color: #3a3b45 !important;
}

.icon-circle {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.border-left-primary {
  border-left: 0.25rem solid var(--lp-color-primary) !important;
}

.border-bottom-primary {
  border-bottom: 0.25rem solid var(--lp-color-primary) !important;
}

.border-left-secondary {
  border-left: 0.25rem solid #858796 !important;
}

.border-bottom-secondary {
  border-bottom: 0.25rem solid #858796 !important;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.border-bottom-success {
  border-bottom: 0.25rem solid #1cc88a !important;
}

.border-left-info {
  border-left: 0.25rem solid #36b9cc !important;
}

.border-bottom-info {
  border-bottom: 0.25rem solid #36b9cc !important;
}
.border-top-info {
  border-top: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
  border-left: 0.25rem solid #f6c23e !important;
}

.border-bottom-warning {
  border-bottom: 0.25rem solid #f6c23e !important;
}

.border-left-danger {
  border-left: 0.25rem solid #e74a3b !important;
}

.border-bottom-danger {
  border-bottom: 0.25rem solid #e74a3b !important;
}

.border-left-light {
  border-left: 0.25rem solid #f8f9fc !important;
}

.border-bottom-light {
  border-bottom: 0.25rem solid #f8f9fc !important;
}

.border-left-dark {
  border-left: 0.25rem solid #5a5c69 !important;
}

.border-bottom-dark {
  border-bottom: 0.25rem solid #5a5c69 !important;
}

/*.progress-sm {*/
/*  height: .5rem;*/
/*}*/

/*.rotate-15 {*/
/*  transform: rotate(15deg);*/
/*}*/

/*.rotate-n-15 {*/
/*  transform: rotate(-15deg);*/
/*}*/

.dropdown .dropdown-menu {
  font-size: 0.85rem;
  box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 10%);
}

.dropdown .dropdown-menu .dropdown-header {
  font-weight: 800;
  font-size: 0.65rem;
  color: #b7b9cc;
}

.dropdown.no-arrow .dropdown-toggle::after {
  display: none;
}

.sidebar .nav-item.dropdown .dropdown-toggle::after,
.topbar .nav-item.dropdown .dropdown-toggle::after {
  width: 1rem;
  text-align: center;
  vertical-align: 0;
  border: 0;
  font-weight: 900;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  right: 0.8rem;
}

.sidebar .nav-item.dropdown.show .dropdown-toggle::after,
.topbar .nav-item.dropdown.show .dropdown-toggle::after {
  content: "\f107";
}

.sidebar .nav-item .nav-link,
.topbar .nav-item .nav-link {
  position: relative;
}

.sidebar .nav-item .nav-link .badge-counter,
.topbar .nav-item .nav-link .badge-counter {
  position: absolute;
  transform: scale(0.7);
  transform-origin: top right;
  right: 0.25rem;
  margin-top: -0.25rem;
}

.img-profile {
  object-fit: cover;
  height: 3rem;
  width: 3rem;
}

i.user-profile {
  font-size: 2rem;
  padding: 6px;
}

.topbar {
  height: 4.375rem;
}

.topbar .navbar-search {
  flex: 1 1 auto;
  min-width: 0 !important;
}

.topbar .navbar-search input {
  font-size: 0.85rem;
  height: auto;
}

.topbar .topbar-divider {
  width: 0;
  border-right: 1px solid var(--tbl-border);
  height: calc(4.375rem - 2rem);
  margin: auto 1rem;
}

.topbar .nav-item .nav-link {
  height: 4.375rem;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}

.topbar .nav-item .nav-link:focus {
  outline: none;
}

.topbar .nav-item:focus {
  outline: none;
}

.topbar .dropdown {
  position: static;
}

.topbar .dropdown .dropdown-menu {
  width: calc(100% - 1.5rem);
  right: 0.75rem;
  max-height: 85vh;
  overflow-y: auto;
}

.topbar .dropdown-list {
  padding: 0;
  border: none;
  overflow: hidden;
}

.topbar .dropdown-list .dropdown-header {
  background-color: var(--lp-section-header-bg);
  border: 1px solid var(--lp-section-header-bg);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--lp-section-header-text-color);
}

.topbar .dropdown-list .dropdown-item {
  white-space: normal;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-left: 1px solid var(--tbl-border);
  border-right: 1px solid var(--tbl-border);
  border-bottom: 1px solid var(--tbl-border);
  line-height: 1.3rem;
}

.topbar .dropdown-list .dropdown-item .dropdown-list-image {
  position: relative;
  height: 2.5rem;
  width: 2.5rem;
}

.topbar .dropdown-list .dropdown-item .dropdown-list-image img {
  object-fit: cover;
  height: 2.5rem;
  width: 2.5rem;
}

.topbar .dropdown-list .dropdown-item .dropdown-list-image .status-indicator {
  background-color: #eaecf4;
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 0.125rem solid #fff;
}

.topbar .dropdown-list .dropdown-item .text-truncate {
  max-width: 10rem;
}

.topbar .dropdown-list .dropdown-item:active {
  background-color: #eaecf4;
  color: #3a3b45;
}

@media (min-width: 576px) {
  .topbar .dropdown {
    position: relative;
  }
  .topbar .dropdown .dropdown-menu {
    width: auto;
    right: 0;
  }
  .topbar .dropdown-list {
    width: 30rem !important;
  }
  .topbar .dropdown-list .dropdown-item .text-truncate {
    max-width: 13.375rem;
  }
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link {
  color: #d1d3e2;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  color: #b7b9cc;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link:active {
  color: #858796;
}

.sidebar-right {
  border-left: 1px solid #c9c9c9;
  position: fixed;
  top: 70px;
  bottom: 0;
  padding: 10px 7px;
  min-height: calc(100vh - 70px);
  z-index: 150; /* needs to be below 200 for vaadin combobox dropdown to show above it */
  overflow: hidden;
  box-shadow: inset 0 0 100vw 100vw rgb(41 48 65 / 30%);
}

.rightCard {
  height: 100%;
  max-height: 100%;

  .card-body {
    overflow-y: auto;
  }
}

#commentsCardContent {
  height: 100%;

  > .card {
    max-height: 100%;
  }
}

#yasButton,
#commentsButton {
  font-size: 1rem;
  padding: 0.3rem 0.7rem;
}

:root {
  --right-buttons-offset: 33px;
}

#rightButtons {
  position: fixed;
  top: 80px;
  padding-top: 0;
  right: 0;
  margin-right: var(--right-buttons-offset);
  left: auto !important;
  opacity: 0.8;
  transform: rotate(-90deg);
  transform-origin: 100% 0;
  z-index: 5;
}

.main-scroll #rightButtons {
  /* account for scrollbar width plus normal offset */
  margin-right: calc(var(--right-buttons-offset) + 16px);
}

#rightButtons > * {
  outline: none;
  margin-top: -3px;
}

#closeRightMenu {
  position: absolute;
  right: 13px;
  top: 20px;
  z-index: 2;
  border: none;
  background-color: transparent;
  color: #999;
  font-size: 1.2rem;
}

#drag-ghost {
  position: absolute;
  top: -1000px;
  width: 1px;
  height: 1px;
  background-color: transparent;
}

#drag-overlay {
  position: absolute;
  inset: 0;
}

@media (min-width: 800px) {
  #rightButtons {
    top: 80px;
  }
}
#rightMenu #handleBorderLeft:hover {
  background-color: rgba(78, 115, 223, 0.5);
}

.sidebar {
  overflow: auto;
}

.sidebar .nav-item {
  position: relative;
}

.sidebar .nav-item:last-child {
  margin-bottom: 1rem;
}

.sidebar .nav-item .nav-link {
  text-align: center;
  padding: 0.75rem 1rem;
  width: 6.5rem;
}

.sidebar .nav-item .nav-link span {
  font-size: 0.65rem;
  display: block;
}

.sidebar .nav-item.active .nav-link {
  font-weight: 700;
}

.sidebar .nav-item .collapse {
  position: absolute;
  left: 6.5rem;
  z-index: 1;
  top: 2px;
  background-color: var(--lp-sidebar-bg);
  border-left: 1px solid #fff;
}

/*.sidebar .nav-item .collapse .collapse-inner {*/
/*  border-radius: 0.35rem;*/
/*  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);*/
/*}*/

.sidebar .nav-item .collapsing {
  display: none;
  transition: none;
}

/*.sidebar .nav-item .collapse .collapse-inner,*/
/*.sidebar .nav-item .collapsing .collapse-inner {*/
/*  padding: .5rem 0;*/
/*  min-width: 10rem;*/
/*  font-size: 0.85rem;*/
/*  margin: 0 0 1rem 0;*/
/*}*/

.sidebar .nav-item .collapse .collapse-inner .collapse-header,
.sidebar .nav-item .collapsing .collapse-inner .collapse-header {
  margin: 0 0 0.5rem 0;
  white-space: nowrap;
  padding: 0.5rem 0.5rem 0.5rem 1.4rem;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.65rem;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
  padding: 0 1rem 0.75rem 1rem;
  margin: 0 0 0 0.5rem;
  display: flex; /* so I can add badges to the right of menu items */
  color: var(--lp-sidebar-text-color);
  text-decoration: none;
  font-size: var(--lp-sidebar-font-size);
  white-space: nowrap;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
  color: var(--lp-sidebar-text-color__active);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
  color: var(--lp-sidebar-nested-text-color__active);
  font-weight: 700;
}

/*.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,*/
/*.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {*/
/*  color: #4e73df;*/
/*  font-weight: 700;*/
/*}*/

#sidebarToggle {
  width: calc(100% - 16px); /* avoid scrollbar */
  height: 1.5rem;
  cursor: pointer;
  position: absolute;
  left: 0;
  bottom: 0.1rem;
  background-color: inherit;
  border: none;
  text-align: right;
  padding: 0;
}

#sidebarToggle::after {
  font-weight: 900;
  color: var(--lp-color-primary); /* var(--lp-sidebar-text-color); */
  content: "\f053";
  font-family: "Font Awesome 5 Free";
  margin-right: 0.1rem;
  margin-top: -2px;
  display: block;
}

#sidebarToggle:focus {
  outline: none;
}

html.sidebar-toggled #accordionSidebar,
.sidebar.toggled {
  width: 0.25rem !important;
  overflow: hidden;
  background-color: var(--primary);
}

html.sidebar-toggled #sidebarToggle {
  background-color: #fff;
  left: 0.5rem;
  width: 1.5rem;
  position: fixed;

  &:after {
    color: var(--lp-color-primary); /* var(--lp-sidebar-bg); */
    content: "\f0c9";
  }
}

#env {
  position:absolute;
  bottom:0;
  left:0;
  z-index: 1;
  margin: 0 0.5rem;
  line-height: normal;
}

html.sidebar-toggled #env {
  left: 2rem;
}

.sidebar-brand {
  height: 3.375rem;
  text-decoration: none;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  padding: 1.5rem 1rem;
  text-align: center;
  letter-spacing: 0.05rem;
  z-index: 1;
}

.sidebar-toggled .sidebar .sidebar-brand .sidebar-brand-icon {
  display: none;
}

.sidebar .sidebar-brand .sidebar-brand-text {
  display: none;
}

.sidebar hr.sidebar-divider {
  margin: 0 1rem 1rem;
}

.sidebar .sidebar-heading {
  text-align: center;
  padding: 0 1rem;
  font-weight: 800;
  font-size: 0.65rem;
}

@media (min-width: 768px) {
  /* .sidebar {
    width: 11rem !important;
  } */
  .sidebar .nav-item .collapse {
    position: relative;
    left: 0;
    z-index: 1;
    top: 0;
    -webkit-animation: none;
    animation: none;
    border-left: none;
  }
  .sidebar .nav-item .collapse .collapse-inner {
    border-radius: 0;
    box-shadow: none;
  }
  .sidebar .nav-item .collapsing {
    display: block;
    transition: height 0.15s ease;
  }
  .sidebar .nav-item .collapse,
  .sidebar .nav-item .collapsing {
    margin: 0 0.5rem;
  }
  .sidebar .nav-item .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
  }
  .sidebar .nav-item .nav-link i {
    font-size: var(--lp-sidebar-font-size);
    margin-right: 0.25rem;
  }
  .sidebar .nav-item .nav-link span {
    font-size: var(--lp-sidebar-font-size);
    display: inline;
  }
  .sidebar .nav-item .nav-link[data-bs-toggle="collapse"]::after {
    width: 1rem;
    text-align: center;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 0.8rem;
  }
  .sidebar .nav-item .nav-link[data-bs-toggle="collapse"].collapsed::after {
    content: "\f105";
  }
  .sidebar .sidebar-brand .sidebar-brand-icon,
  .sidebar .sidebar-brand .sidebar-brand-text {
    display: inline;
  }
  .sidebar .sidebar-heading {
    text-align: left;
  }
  .sidebar.toggled {
    overflow: visible;
    width: 0.25rem;
  }
  .sidebar.toggled .nav-item .collapse {
    position: absolute;
    left: calc(6.5rem);
    z-index: 1;
    top: 2px;
    -webkit-animation-name: growIn;
    animation-name: growIn;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function:
      transform cubic-bezier(0.18, 1.25, 0.4, 1),
      opacity cubic-bezier(0, 1, 0.4, 1);
    animation-timing-function:
      transform cubic-bezier(0.18, 1.25, 0.4, 1),
      opacity cubic-bezier(0, 1, 0.4, 1);
  }
  .sidebar.toggled .nav-item .collapse .collapse-inner {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    border-radius: 0.35rem;
  }
  .sidebar.toggled .nav-item .collapsing {
    display: none;
    transition: none;
  }
  .sidebar.toggled .nav-item .collapse,
  .sidebar.toggled .nav-item .collapsing {
    margin: 0;
  }
  .sidebar.toggled .nav-item:last-child {
    margin-bottom: 1rem;
  }
  .sidebar.toggled .nav-item .nav-link {
    text-align: center;
    padding: 0.5rem;
    width: 6.5rem;
    display: none;
  }
  .sidebar.toggled .nav-item .nav-link span {
    font-size: 0.65rem;
    display: block;
  }
  .sidebar.toggled .nav-item .nav-link i {
    margin-right: 0;
  }
  .sidebar.toggled .nav-item .nav-link[data-bs-toggle="collapse"]::after {
    display: none;
  }
  .sidebar.toggled .sidebar-brand .sidebar-brand-text {
    display: none;
  }
  .sidebar.toggled .sidebar-brand .sidebar-brand-icon {
    /* display: inline; */
    display: none;
  }

  .sidebar.toggled .sidebar-heading {
    text-align: center;
    display: none;
  }
}

#levpro_badge {
  display: none;
}

@media (max-width: 575.98px) {
  #levpro_badge {
    display: block;
  }

  #levpro_logo {
    display: none;
  }

  .lp-nav .navbar-nav .nav-item {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  .img-profile {
    height: 2.2rem;
    width: 2.2rem;
    margin-left: 1rem;
  }

  #custom_formats_div,
  #sheet_print,
  #sheet_cols {
    display: none;
  }

  #spreadsheet_search {
    width: auto !important;
  }

  .card-header {
    overflow-x: hidden;
  }

  .sidebar {
    overflow: unset !important;
  }
}

.sidebar-light .sidebar-brand {
  color: #6e707e;
}

.sidebar-light hr.sidebar-divider {
  border-top: 1px solid #eaecf4;
}

.sidebar-light .sidebar-heading {
  color: #b7b9cc;
}

.sidebar-light .nav-item .nav-link {
  color: #858796;
}

.sidebar-light .nav-item .nav-link i {
  color: #d1d3e2;
}

.sidebar-light .nav-item .nav-link:active,
.sidebar-light .nav-item .nav-link:focus,
.sidebar-light .nav-item .nav-link:hover {
  color: #6e707e;
}

.sidebar-light .nav-item .nav-link:active i,
.sidebar-light .nav-item .nav-link:focus i,
.sidebar-light .nav-item .nav-link:hover i {
  color: #6e707e;
}

.sidebar-light .nav-item .nav-link[data-bs-toggle="collapse"]::after {
  color: #b7b9cc;
}

.sidebar-light .nav-item.active .nav-link {
  color: #6e707e;
}

.sidebar-light .nav-item.active .nav-link i {
  color: #6e707e;
}

.sidebar-light #sidebarToggle {
  background-color: #eaecf4;
}

.sidebar-light #sidebarToggle::after {
  color: #b7b9cc;
}

.sidebar-light #sidebarToggle:hover {
  background-color: #fff;
}

.sidebar-dark .sidebar-brand {
  color: var(--lp-sidebar-text-color);
}

.sidebar-dark hr.sidebar-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-dark .sidebar-heading {
  color: var(--lp-sidebar-text-color);
}

.sidebar-dark .nav-item .nav-link[data-bs-toggle] {
  color: var(--lp-sidebar-text-color__active);
}

.sidebar-dark .nav-item .nav-link.collapsed {
  color: var(--lp-sidebar-text-color);
}

.sidebar-dark .nav-item .nav-link i {
  color: var(--lp-sidebar-text-color);
}

.sidebar-dark .nav-item .nav-link:active,
.sidebar-dark .nav-item .nav-link:focus,
.sidebar-dark .nav-item .nav-link:hover {
  color: var(--lp-sidebar-text-color__active);
}

.sidebar-dark .nav-item .nav-link:active i,
.sidebar-dark .nav-item .nav-link:focus i,
.sidebar-dark .nav-item .nav-link:hover i {
  color: var(--lp-sidebar-text-color__active);
}

.sidebar-dark .nav-item .nav-link[data-bs-toggle="collapse"]::after {
  color: var(--lp-sidebar-text-color);
}

.sidebar-dark .nav-item.active .nav-link {
  color: var(--lp-sidebar-text-color__active);
}

.sidebar-dark .nav-item.active .nav-link i {
  color: var(--lp-sidebar-text-color__active);
}

.btn-circle {
  border-radius: 100%;
  height: 2.5rem;
  width: 2.5rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-circle.btn-sm,
.btn-group-sm > .btn-circle.btn {
  height: 1.8rem;
  width: 1.8rem;
  font-size: 0.75rem;
}

.btn-circle.btn-lg,
.btn-group-lg > .btn-circle.btn {
  height: 3.5rem;
  width: 3.5rem;
  font-size: 1.35rem;
}

.btn-icon-split {
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
}

.btn-icon-split .icon {
  background: rgba(0, 0, 0, 0.15);
  display: inline-block;
  padding: 0.375rem 0.75rem;
}

.btn-icon-split .text a {
  display: inline-block;
  padding: 0.375rem 0.75rem;
}

.btn-icon-split.btn-sm .icon,
.btn-group-sm > .btn-icon-split.btn .icon {
  padding: 0.25rem 0.5rem;
}

.btn-icon-split.btn-sm .text a,
.btn-group-sm > .btn-icon-split.btn .text a {
  padding: 0.25rem 0.5rem;
}

.btn-icon-split.btn-lg .icon,
.btn-group-lg > .btn-icon-split.btn .icon {
  padding: 0.5rem 1rem;
}

.btn-icon-split.btn-lg .text a,
.btn-group-lg > .btn-icon-split.btn .text a {
  padding: 0.5rem 1rem;
}

.card .card-header .dropdown {
  line-height: 1;
}

.card .card-header .dropdown .dropdown-menu {
  line-height: 1.5;
}

.card .card-header[data-bs-toggle="collapse"] {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  padding: 0.75rem 3.25rem 0.75rem 1.25rem;
}

.card .card-header[data-bs-toggle="collapse"] > .row {
  flex: 1 1 auto;
}

.card [data-bs-toggle="collapse"] .nav-wizard {
  align-items: center;
}

.card .card-header[data-bs-toggle="collapse"]::after,
.card [data-bs-toggle="collapse"] .nav-wizard::after {
  position: absolute;
  right: 0;
  padding-right: 1rem;
  line-height: 30px;
  font-weight: 900;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  color: #d1d3e2;
}
@media print {
  .card .card-header[data-bs-toggle="collapse"]::after {
    display: none;
  }
}

.card .card-header[data-bs-toggle="collapse"].collapsed {
  border-radius: 0.35rem;
}

.card .card-header[data-bs-toggle="collapse"].collapsed::after,
.card [data-bs-toggle="collapse"].collapsed .nav-wizard::after {
  content: "\f105";
}
@media print {
  .card .card-header[data-bs-toggle="collapse"].collapsed::after {
    display: none;
  }
}

.chart-area {
  position: relative;
  height: 10rem;
  width: 100%;
}

@media (min-width: 768px) {
  .chart-area {
    height: 20rem;
  }
}

.chart-bar {
  position: relative;
  height: 10rem;
  width: 100%;
}

@media (min-width: 768px) {
  .chart-bar {
    height: 20rem;
  }
}

.chart-pie {
  position: relative;
  height: 15rem;
  width: 100%;
}

@media (min-width: 768px) {
  .chart-pie {
    height: calc(20rem - 43px) !important;
  }
}

.bg-login-image {
  background-position: center;
  background-size: cover;
}

.bg-register-image {
  background-position: center;
  background-size: cover;
}

.bg-password-image {
  background-position: center;
  background-size: cover;
}

form.user .custom-checkbox.small label {
  line-height: 1.5rem;
}

form.user .form-control-user {
  font-size: 0.8rem;
  border-radius: 10rem;
  padding: 1.5rem 1rem;
}

form.user .btn-user {
  font-size: 0.8rem;
  border-radius: 10rem;
  padding: 0.75rem 1rem;
}

.error {
  color: #5a5c69;
  font-size: 7rem;
  position: relative;
  line-height: 1;
  width: 12.5rem;
}

@-webkit-keyframes noise-anim {
  0% {
    clip: rect(32px, 9999px, 16px, 0);
  }
  5% {
    clip: rect(5px, 9999px, 24px, 0);
  }
  10% {
    clip: rect(77px, 9999px, 87px, 0);
  }
  15% {
    clip: rect(91px, 9999px, 95px, 0);
  }
  20% {
    clip: rect(74px, 9999px, 9px, 0);
  }
  25% {
    clip: rect(37px, 9999px, 32px, 0);
  }
  30% {
    clip: rect(56px, 9999px, 27px, 0);
  }
  35% {
    clip: rect(35px, 9999px, 33px, 0);
  }
  40% {
    clip: rect(89px, 9999px, 6px, 0);
  }
  45% {
    clip: rect(81px, 9999px, 77px, 0);
  }
  50% {
    clip: rect(64px, 9999px, 69px, 0);
  }
  55% {
    clip: rect(12px, 9999px, 11px, 0);
  }
  60% {
    clip: rect(59px, 9999px, 11px, 0);
  }
  65% {
    clip: rect(69px, 9999px, 59px, 0);
  }
  70% {
    clip: rect(74px, 9999px, 65px, 0);
  }
  75% {
    clip: rect(56px, 9999px, 79px, 0);
  }
  80% {
    clip: rect(80px, 9999px, 64px, 0);
  }
  85% {
    clip: rect(87px, 9999px, 29px, 0);
  }
  90% {
    clip: rect(16px, 9999px, 21px, 0);
  }
  95% {
    clip: rect(69px, 9999px, 43px, 0);
  }
  100% {
    clip: rect(75px, 9999px, 63px, 0);
  }
}

@keyframes noise-anim {
  0% {
    clip: rect(32px, 9999px, 16px, 0);
  }
  5% {
    clip: rect(5px, 9999px, 24px, 0);
  }
  10% {
    clip: rect(77px, 9999px, 87px, 0);
  }
  15% {
    clip: rect(91px, 9999px, 95px, 0);
  }
  20% {
    clip: rect(74px, 9999px, 9px, 0);
  }
  25% {
    clip: rect(37px, 9999px, 32px, 0);
  }
  30% {
    clip: rect(56px, 9999px, 27px, 0);
  }
  35% {
    clip: rect(35px, 9999px, 33px, 0);
  }
  40% {
    clip: rect(89px, 9999px, 6px, 0);
  }
  45% {
    clip: rect(81px, 9999px, 77px, 0);
  }
  50% {
    clip: rect(64px, 9999px, 69px, 0);
  }
  55% {
    clip: rect(12px, 9999px, 11px, 0);
  }
  60% {
    clip: rect(59px, 9999px, 11px, 0);
  }
  65% {
    clip: rect(69px, 9999px, 59px, 0);
  }
  70% {
    clip: rect(74px, 9999px, 65px, 0);
  }
  75% {
    clip: rect(56px, 9999px, 79px, 0);
  }
  80% {
    clip: rect(80px, 9999px, 64px, 0);
  }
  85% {
    clip: rect(87px, 9999px, 29px, 0);
  }
  90% {
    clip: rect(16px, 9999px, 21px, 0);
  }
  95% {
    clip: rect(69px, 9999px, 43px, 0);
  }
  100% {
    clip: rect(75px, 9999px, 63px, 0);
  }
}

.error:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 #e74a3b;
  top: 0;
  color: #5a5c69;
  background: #f8f9fc;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@-webkit-keyframes noise-anim-2 {
  0% {
    clip: rect(12px, 9999px, 52px, 0);
  }
  5% {
    clip: rect(42px, 9999px, 39px, 0);
  }
  10% {
    clip: rect(64px, 9999px, 36px, 0);
  }
  15% {
    clip: rect(52px, 9999px, 15px, 0);
  }
  20% {
    clip: rect(79px, 9999px, 7px, 0);
  }
  25% {
    clip: rect(17px, 9999px, 41px, 0);
  }
  30% {
    clip: rect(15px, 9999px, 20px, 0);
  }
  35% {
    clip: rect(62px, 9999px, 87px, 0);
  }
  40% {
    clip: rect(94px, 9999px, 11px, 0);
  }
  45% {
    clip: rect(49px, 9999px, 10px, 0);
  }
  50% {
    clip: rect(82px, 9999px, 4px, 0);
  }
  55% {
    clip: rect(70px, 9999px, 100px, 0);
  }
  60% {
    clip: rect(62px, 9999px, 23px, 0);
  }
  65% {
    clip: rect(51px, 9999px, 56px, 0);
  }
  70% {
    clip: rect(41px, 9999px, 24px, 0);
  }
  75% {
    clip: rect(6px, 9999px, 85px, 0);
  }
  80% {
    clip: rect(96px, 9999px, 58px, 0);
  }
  85% {
    clip: rect(16px, 9999px, 24px, 0);
  }
  90% {
    clip: rect(40px, 9999px, 31px, 0);
  }
  95% {
    clip: rect(91px, 9999px, 34px, 0);
  }
  100% {
    clip: rect(87px, 9999px, 26px, 0);
  }
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(12px, 9999px, 52px, 0);
  }
  5% {
    clip: rect(42px, 9999px, 39px, 0);
  }
  10% {
    clip: rect(64px, 9999px, 36px, 0);
  }
  15% {
    clip: rect(52px, 9999px, 15px, 0);
  }
  20% {
    clip: rect(79px, 9999px, 7px, 0);
  }
  25% {
    clip: rect(17px, 9999px, 41px, 0);
  }
  30% {
    clip: rect(15px, 9999px, 20px, 0);
  }
  35% {
    clip: rect(62px, 9999px, 87px, 0);
  }
  40% {
    clip: rect(94px, 9999px, 11px, 0);
  }
  45% {
    clip: rect(49px, 9999px, 10px, 0);
  }
  50% {
    clip: rect(82px, 9999px, 4px, 0);
  }
  55% {
    clip: rect(70px, 9999px, 100px, 0);
  }
  60% {
    clip: rect(62px, 9999px, 23px, 0);
  }
  65% {
    clip: rect(51px, 9999px, 56px, 0);
  }
  70% {
    clip: rect(41px, 9999px, 24px, 0);
  }
  75% {
    clip: rect(6px, 9999px, 85px, 0);
  }
  80% {
    clip: rect(96px, 9999px, 58px, 0);
  }
  85% {
    clip: rect(16px, 9999px, 24px, 0);
  }
  90% {
    clip: rect(40px, 9999px, 31px, 0);
  }
  95% {
    clip: rect(91px, 9999px, 34px, 0);
  }
  100% {
    clip: rect(87px, 9999px, 26px, 0);
  }
}

.error:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 #4e73df;
  top: 0;
  color: #5a5c69;
  background: #f8f9fc;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

footer {
  padding: 0.5rem 0;
  flex-shrink: 0;
}

footer .copyright {
  line-height: 1;
  font-size: 0.8rem;
}

body.sidebar-toggled footer.sticky-footer {
  width: 100%;
}

.chip {
  display: inline-flex;
  padding: 0 8px;
  margin-right: 4px;
  white-space: nowrap;
  font-size: 0.85em;
  line-height: 32px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.chip img {
  margin: 0 5px 0 -5px;
  max-height: 32px;
  object-fit: cover;
  border-radius: 50%;
}

.chip-delete {
  margin-left: 4px;
  width: 1rem;
  visibility: hidden;

  &,
  &:hover {
    color: var(--danger);
  }

  i {
    font-size: 0.85rem;
  }
}

*:hover > .chip-delete {
  visibility: visible;
}

.sec-short:hover .chip-delete {
  display: inline;
}

/* Nav Wizard classes used in Pipeline to show active stage */
.nav-wizard .nav-link {
  display: flex;
  align-items: center;
  padding: 2rem;
}
.nav-wizard .nav-link .wizard-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  margin-right: 1rem;
  border-radius: 0.35rem;
  background-color: #999;
  color: white;
}
.nav-wizard .nav-link .wizard-step-icon i,
.nav-wizard .nav-link .wizard-step-icon svg,
.nav-wizard .nav-link .wizard-step-icon .feather {
  color: white;
}
.nav-wizard .nav-link .wizard-step-text {
  line-height: 1;
  text-align: left;
}
.nav-wizard .nav-link .wizard-step-text .wizard-step-text-name {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #666;
}
.nav-wizard .nav-link .wizard-step-text .wizard-step-text-details {
  font-weight: 400;
  font-size: 0.875rem;
  color: #69707a;
}
.nav-wizard .nav-link.active .wizard-step-icon {
  background-color: #fff;
  color: #999;
}
.nav-wizard .nav-link.active .wizard-step-icon i,
.nav-wizard .nav-link.active .wizard-step-icon svg,
.nav-wizard .nav-link.active .wizard-step-icon .feather {
  color: #999;
}
.nav-wizard .nav-link.active .wizard-step-text .wizard-step-text-name {
  color: #fff;
}
.nav-wizard .nav-link.active .wizard-step-text .wizard-step-text-details {
  color: rgba(255, 255, 255, 0.5);
}

/* STEP WAS GOING TO BE USED IN PIPELINE VIEW BUT NOT USED FOR NOW

.step {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.step .step-item {
    flex: 1 1 0;
    position: relative;
    text-align: center;
}

.step .step-item .step-item-link {
    color: #69707a;
    position: relative;
    display: inline-block;
    padding-top: 1.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-decoration: none;
    z-index: 1;
}

.step-primary .step-item .step-item-link {
    color: #0061f2;
}

.step .step-item .step-item-link::before {
    background-color: #69707a;
    border: 0.125rem solid #fff;
    border-radius: 100%;
    content: "";
    display: block;
    height: 1rem;
    width: 1rem;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    z-index: 1;
}

.step-primary .step-item .step-item-link::before {
    background-color: #0061f2;
}

.step-primary .step-item:not(:first-child)::before {
    background-color: #0061f2;
}

.step .step-item:not(:first-child)::before {
    background-color: #69707a;
    content: "";
    height: 0.125rem;
    left: -50%;
    position: absolute;
    top: 0.4375rem;
    width: 100%;
    z-index: 0;
}

.step-primary .step-item:not(:first-child)::before {
    background-color: #0061f2;
}

.step-primary .step-item.active a::before {
    border-color: #0061f2;
}

.step .step-item.active a::before {
    background: #fff;
    border: 0.125rem solid #69707a;
}

.step .step-item.active ~ .step-item::before {
    background: #d4dae3;
}

.step .step-item.active ~ .step-item .step-item-link {
    color: #d4dae3;
}

.step .step-item .step-item-link.disabled {
    pointer-events: none;
    cursor: default;
}

.step .step-item.active ~ .step-item .step-item-link::before {
    background: #d4dae3;
}
*/

#toggle-chat-rich-text-container {
  max-width: 45px;
  height: 35px;
  border-color: #ccc !important;
}

.editable-error-block {
  color: var(--danger);
}

/* MG - BS5 now has XXL built-in */

@media (min-width: 1570px) {
  /* expanding BS4 max-width */
  .container {
    max-width: 1540px;
  }
}

.table {
  --bs-table-color-state: var(--lp-text-secondary-color);
  color: var(--lp-text-primary-color);

  & > :not(:first-child) {
    border-top: 1px solid currentColor;
  }
}

/* Plotly styling */

.modebar-container {
  display: none !important;
}

/* HTMX spinners.  During the request .htmx-request is added to the element */
.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator {
  opacity: 1;
}
.htmx-request.htmx-indicator {
  opacity: 1;
}

.modal-open #overlay {
  z-index: 1056; /* boostrap modal z-index + 1 */
}

#sheet_cols .form-check {
  min-height: auto;
}

.navbar {
  --bs-navbar-padding-y: 0;
}

.nobr {
  white-space: nowrap;
}