/*@import '../blazor-themes/material3-dark/material3-dark.min.scss';*/
@import 'https://cdn.syncfusion.com/blazor/27.1.48/styles/material3-dark.css';
/*@import 'https://cdn.jsdelivr.net/npm/@materialstyle/materialstyle@3.1.1/dist/css/materialstyle.min.css';*/
:root {
  --color-theme-1: #78a7f1;
  --color-theme-2: #ed701d;
  --color-theme-3: #6c757d;
  --color-theme-neutral: rgb(181 209 205);
  --color-sf-black: 0, 0, 0;
  --color-sf-white: 255, 255, 255;
  --color-sf-primary: #78a7f1;
  --color-sf-primary-container: rgb(46 44 51);
  --color-sf-secondary: #2a69c5;
  --color-sf-secondary-container: 74, 68, 88;
  --color-sf-tertiary: 239, 184, 200;
  --color-sf-tertiary-container: 99, 59, 72;
  --color-sf-surface: rgb(26 28 22);
  --color-sf-surface-variant: rgb(49 49 49);
  --color-sf-background: rgb(28, 27, 31);
  --color-sf-on-primary: rgb(55 55 55);
  --color-sf-on-primary-container: 234, 221, 255;
  --color-sf-on-secondary: 51, 45, 65;
  --color-sf-on-secondary-container: 232, 222, 248;
  --color-sf-on-tertiary: 73, 37, 50;
  --color-sf-on-tertiary-containe: 255, 216, 228;
  --color-sf-on-surface: rgb(230, 225, 229);
  --color-sf-on-surface-variant: 202, 196, 208;
  --color-sf-inverse-on-surface: rgb(33 34 26) !important;
  --color-sf-on-background: 230, 225, 229;
  --color-sf-outline: 147, 143, 153;
  --color-sf-outline-variant: 68, 71, 70;
  --color-sf-shadow: 0, 0, 0;
  --color-sf-surface-tint-color: 208, 188, 255;
  --color-sf-inverse-surface: 194, 201, 194;
  --color-sf-inverse-on-surface: 221, 221, 221;
  --color-sf-inverse-primary: 103, 80, 164;
  --color-sf-scrim: 0, 0, 0;
  --color-sf-error: 242, 77, 77;
  --color-sf-error-container: 140, 29, 24;
  --color-sf-on-error: 96, 20, 16;
  --color-sf-on-error-container: 249, 222, 220;
  --color-sf-success: #56c636;
  --color-sf-success-container: 22, 62, 2;
  --color-sf-on-success: 13, 39, 0;
  --color-sf-on-success-container: 183, 250, 150;
  --color-sf-info: 71, 172, 251;
  --color-sf-info-container: 0, 67, 120;
  --color-sf-on-info: 0, 51, 91;
  --color-sf-on-info-container: 173, 219, 255;
  --color-sf-warning: 245, 180, 130;
  --color-sf-warning-container: 123, 65, 0;
  --color-sf-on-warning: 99, 52, 0;
  --color-sf-on-warning-container: 255, 220, 193;
  --color-sf-spreadsheet-gridline: 231, 224, 236;
  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
  --color-sf-success-text: 0, 0, 0;
  --color-sf-warning-text: 0, 0, 0;
  --color-sf-info-text: 0, 0, 0;
  --color-sf-danger-text: 0, 0, 0;
  --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
  --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
  --bs-body-bg: var(--color-sf-surface);
  --bs-body-color: var(--color-sf-primary);
  --bs-body-color-alt: rgb(46 48 91);
  --bs-body-color-alt-norgb: 19, 21, 42;
  --bs-dropdown-link-hover-bg: var(--color-sf-surface-variant);
  --bs-btn-active-bg: var(--color-sf-primary);
  --bs-bg-opacity: 1;
  /*--bs-dark-rgb: rgb(33, 37, 41);*/
}

.color-theme-1 {
  color: var(--color-theme-1);
}

.color-theme-2 {
  color: var(--color-theme-2);
}

.color-theme-3 {
  color: var(--color-theme-3);
}

.color-theme-neutral {
  color: var(--color-theme-neutral);
}

.bg-color-theme-1 {
  background-color: var(--color-theme-1);
}

.bg-color-theme-2 {
  background-color: var(--color-theme-2);
}

.bg-color-theme-3 {
  background-color: var(--color-theme-3);
}

.nav-link.btn-primary {
  background: 0 var(--color-sf-primary);
}

.e-btn.e-primary, .e-css.e-btn.e-primary {
  background: var(--color-sf-primary);
}

.btn-primary {
  --mdc-ripple-color: var(--color-sf-on-primary);
  --bs-btn-color: var(--color-sf-on-primary);
  --bs-btn-bg: var(--color-sf-primary);
  --bs-btn-hover-color: var(--bs-text-on-primary);
  --bs-btn-hover-bg: var(--color-sf-primary);
  --bs-btn-active-color: var(--color-sf-on-primary);
  --bs-btn-active-bg: var(--color-sf-primary);
  --bs-btn-disabled-color: var(--color-sf-on-primary);
  --bs-btn-disabled-bg: var(--color-sf-surface);
}

.btn-primary {
  color: var(--color-sf-on-primary);
  background-color: var(--color-sf-primary);
  border-color: var(--color-sf-primary);
}

.btn-secondary {
  color: var(--color-sf-on-secondary);
  background-color: var(--color-sf-secondary);
  border-color: var(--color-sf-secondary);
}

.btn-primary-color-theme-1 {
  color: #fff;
  background-color: var(--color-theme-1);
  border-color: var(--color-theme-2);
}

.e-btn.e-primary, .e-css.e-btn.e-primary {
  background: var(--color-sf-primary);
  border-color: var(--color-sf-primary);
  color: var(--color-sf-on-primary);
  box-shadow: none;
}

.e-btn.e-primary-color-theme-1, .e-css.e-btn.e-primary-color-theme-1 {
  background: var(--color-theme-1);
  border-color: #fff;
  color: #fff;
  box-shadow: none;
}

.e-btn.e-primary-color-theme-1:hover, .e-css.e-btn.e-primary-color-theme-1:hover {
  background: #828d61;
  border-color: #fff;
  color: #fff;
  box-shadow: none;
}

.e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus, .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover {
  background: linear-gradient(0deg, var(--color-sf-on-primary, 0.08), var(--color-sf-on-primary, 0.08)), var(--color-sf-primary);
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  color: var(--color-sf-primary);
}

.text-primary, span.text-primary {
  color: var(--color-sf-primary) !important;
}

.btn.btn-mono {
  color: black !important;
  background-color: transparent;
  border: 2px solid black !important;
  padding: 10px;
  border-radius: 18px !important;
}

.btn.btn-mono:hover {
  color: white !important;
  background-color: black;
  border: 2px solid black !important;
}

.btn.btn-mono-dark {
  color: white !important;
  background-color: transparent;
  border: 2px solid white !important;
  padding: 10px;
  border-radius: 18px !important;
}

.btn.btn-mono-dark:hover {
  color: black !important;
  background-color: white;
  border: 2px solid white !important;
}

.btn.btn-mono-inv {
  color: white !important;
  background-color: black;
  border: 2px solid white !important;
  padding: 10px;
  border-radius: 18px !important;
}

.btn.btn-mono-inv:hover {
  color: black !important;
  background-color: white;
  border: 2px solid black !important;
}

.btn.btn-mono-dark-inv {
  color: black !important;
  background-color: white;
  border: 2px solid white !important;
  padding: 10px;
  border-radius: 18px !important;
}

.btn.btn-mono-dark-inv:hover {
  color: white !important;
  background-color: transparent;
  border: 2px solid white !important;
}

/*.e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus, .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover {
    color: var(--color-sf-on-primary);
    background-color: var(--color-sf-primary);
    outline: linear-gradient(0deg, var(--color-sf-primary, 0.05), var(--color-sf-primary, 0.05)), var(--color-sf-surface) 0 solid;
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}*/
.dropdown-item:focus, .dropdown-item:hover {
  background-color: var(--color-sf-surface-variant);
}

.form-control {
  background-color: var(--color-sf-surface);
  color: var(--color-sf-secondary);
}

.form-control:focus {
  color: var(--color-sf-primary);
  background-color: var(--color-sf-surface-variant);
  border-color: var(--color-sf-primary);
  box-shadow: 0 0 0 0.25rem var(--color-sf-primary-container);
}

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

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--color-sf-primary) !important;
  background-color: var(--color-sf-primary-container) !important;
  border-color: var(--color-sf-primary) !important;
}

.nav-link {
  color: var(--color-sf-primary) !important;
}

.btn-primary:hover {
  color: var(--color-sf-primary);
  background-color: var(--color-sf-primary-container);
  border-color: var(--color-sf-primary);
}

.btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
  color: var(--color-sf-primary);
  background-color: var(--color-sf-on-primary);
  border-color: var(--color-sf-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem var(--color-sf-primary-container);
}

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

a {
  color: var(--color-theme-1);
  text-decoration: underline;
}

a:hover {
  color: #828d61;
}

.nav-link.btn-primary[b-8aw1pzfyxu] {
  background: 0 var(--color-sf-primary);
  color: var(--color-sf-on-primary) !important;
}

input, select, textarea {
  background-color: initial;
  color: initial;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  color: var(--color-sf-primary) !important;
  background-color: var(--color-sf-on-primary) !important;
  border-color: var(--color-sf-primary) !important;
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: var(--color-sf-primary);
  background-color: var(--color-sf-on-primary);
  border-color: var(--color-sf-primary);
  box-shadow: 0 0 0 0.25rem var(--color-sf-primary-container);
}

.e-card {
  margin: 5px;
}

.e-card {
  -webkit-tap-highlight-color: rgba(var(--color-sf-primary));
  background: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  border: none none none;
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  color: rgba(var(--color-sf-on-surface));
  outline: none;
}

.hero {
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  position: relative;
  padding: 50px 80px;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-title {
  font-weight: 600;
  font-size: 3rem;
  margin: 0;
}

.hero-subtitle {
  font-weight: 400;
  font-size: 1.5rem;
  margin: 10px 0;
}

div .fill-img {
  width: 100%;
  text-align: center;
}

img.fill-img {
  width: 100%; /* Full width */
  height: auto; /* Auto height to maintain aspect ratio */
  object-fit: cover; /* Cover the container while maintaining aspect ratio */
  display: block;
  margin: 0 auto;
}

.m-width-m {
  max-width: 148px;
}

.m-width-xl {
  max-width: 400px;
}

.mdi-round {
  border-radius: 50%;
  padding: 2px;
  background-color: var(--color-sf-primary);
  color: var(--color-sf-on-primary);
  display: inline-flex;
  width: 35px;
  height: 35px;
  align-content: center;
  justify-content: center;
}

.mdi-round-color-theme-1 {
  background-color: var(--color-theme-1) !important;
  color: #fff;
}

.mdi-round::before {
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
}

/*.sidebar[b-ffr4qp9n9w] {
    background: rgb(4,4,4) !important;
    background-image: none !important;
}*/
.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
  background: var(--color-sf-primary);
  color: var(--color-sf-on-primary);
}

.flex-left-aligned {
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
}

hr {
  margin: 0;
  padding: 0;
}

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

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

.width100 {
  width: 100% !important;
}

.e-badge {
  z-index: 9999;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-t-10 {
  margin-top: 10px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-t-20 {
  margin-top: 20px;
}

p {
  margin: 0;
}

.reader-container .reader-content .markdown-content p {
  margin: 20px 0 !important;
}

.no-pointer {
  cursor: default !important;
}

.btn-outline-color-theme-1 {
  color: var(--color-theme-1) !important;
  border-color: var(--color-theme-1) !important;
}

.btn-outline-color-theme-2 {
  color: var(--color-theme-2) !important;
  border-color: var(--color-theme-2) !important;
}

.btn-outline-color-theme-1:hover {
  color: #fff !important;
  background-color: var(--color-theme-1) !important;
  border-color: var(--color-theme-1) !important;
}

.btn-outline-color-theme-2:hover {
  color: #fff !important;
  background-color: var(--color-theme-2) !important;
  border-color: var(--color-theme-2) !important;
}

.btn-check:active + .btn-outline-color-theme-1, .btn-check:checked + .btn-outline-color-theme-1, .btn-outline-color-theme-1.active, .btn-outline-color-theme-1.dropdown-toggle.show, .btn-outline-color-theme-1:active {
  color: #fff !important;
  background-color: var(--color-theme-1) !important;
  border-color: var(--color-theme-1) !important;
}

.btn-check:active + .btn-outline-color-theme-2, .btn-check:checked + .btn-outline-color-theme-2, .btn-outline-color-theme-2.active, .btn-outline-color-theme-2.dropdown-toggle.show, .btn-outline-color-theme-2:active {
  color: #fff !important;
  background-color: var(--color-theme-2) !important;
  border-color: var(--color-theme-2) !important;
}

.form-check-input:checked {
  background-color: var(--color-sf-primary);
  border-color: var(--color-sf-primary-container);
}

.sidebar {
  z-index: 99999;
  width: 250px;
}

table.quickgrid tr {
  border-top: 1px solid #828d61;
}

table.quickgrid tr td {
  padding: 6px !important;
}

.error-message {
  color: var(--bs-danger);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
}

.error-message i {
  margin-right: 5px;
}

input, input:focus-visible, input:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0);
  border-color: var(--color-theme-1);
  border-width: 2px;
  border-style: solid;
  border-radius: 6px;
}

.go-previous[b-3qssc0bm46], .go-next[b-3qssc0bm46] {
  filter: invert(1);
}

.go-first[b-3qssc0bm46], .go-last[b-3qssc0bm46] {
  filter: invert(1);
}

.e-toast-container .e-toast {
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  z-index: 1000;
}

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

.e-toast-container .e-toast .e-toast-message .e-toast-title {
  font-size: 18px;
  font-weight: bold;
}

.e-toast-container .danger.e-toast .e-toast-message .e-toast-title {
  color: red !important;
}

.e-toast-container .e-toast.danger .e-toast-icon {
  color: red !important;
}

.e-toast-container .e-toast.primary .e-toast-message .e-toast-title {
  color: var(--color-sf-primary) !important;
}

.e-toast-close-icon::before {
  content: "\e7e7";
  font-family: "e-icons";
}

.e-toast-container .e-toast .e-toast-message .e-toast-content {
  color: rgba(var(--color-sf-inverse-on-surface));
}

.e-speeddial-popup .e-speeddial-li .e-speeddial-li-icon {
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12);
  background-color: var(--color-sf-surface);
  border-color: var(--color-theme-1);
  z-index: 99999;
  color: var(--color-theme-1);
}

.e-fab.e-btn.e-fab-top.e-fab-middle.e-fab-left.e-fab-center {
  z-index: 9999;
}

.e-fab.e-btn.e-fab-top.e-fab-middle.e-fab-left.e-fab-center:hover {
  color: var(--color-theme-3);
}

.e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus, .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover {
  background-color: var(--color-sf-surface);
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  color: var(--color-sf-primary);
  border-color: var(--color-theme-3);
}

.e-speeddial-popup .e-speeddial-li:not(.e-disabled):hover .e-speeddial-li-icon {
  background: linear-gradient(0deg, var(--color-sf-surface), var(--color-sf-surface)) !important;
  color: var(--color-theme-3);
}

.speeddial-radial-target {
  min-height: 500px;
  position: relative;
}

.speeddial-radial-target .e-fab.e-btn {
  z-index: 99999;
}

e-speeddial-popup e-warning e-speeddial-linear e-speeddial-top e-speeddial-horz-top e-speeddial-horz-right e-speeddial-right {
  top: var(--speeddialVertDist) !important;
}

.e-dialog {
  background-color: var(--color-sf-surface);
}

.e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]) {
  border-color: var(--color-sf-primary);
}

.e-spinner-pane .e-spinner-inner .e-spin-bootstrap {
  fill: var(--color-theme-1);
  stroke: var(--color-theme-1);
}

.e-spinner-pane .e-spinner-inner .e-spin-material, .e-spinner-pane .e-spinner-inner .e-spin-material3 {
  stroke: var(--color-theme-1);
}

.e-tab.e-fill .e-tab-header {
  border-bottom: 4px solid var(--color-sf-surface-variant);
}

.e-tooltip-wrap .e-tip-content {
  border-radius: inherit;
  color: var(--color-sf-inverse-on-surface);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 14px;
  background-color: var(--color-sf-inverse-surface);
  border: 1px solid var(--color-sf-inverse-surface);
}

.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
  background-color: var(--color-sf-background);
  color: var(--color-sf-primary);
  font-weight: 600;
  min-height: 29px;
}

.e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover, .e-dropdownbase .e-list-item.e-hover {
  background-color: var(--color-sf-background);
  color: var(--color-theme-2);
}

input.e-input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input, textarea.e-input, .e-float-input input, .e-float-input.e-control-wrapper input, .e-float-input textarea, .e-float-input.e-control-wrapper textarea {
  background: rgba(0, 0, 0, 0);
  border-color: var(--color-sf-outline);
  color: var(--color-sf-primary);
}

.mytoast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column-reverse; /* This makes the elements stack from bottom to top */
  gap: 0.5rem;
  width: 280px;
  z-index: 99999;
}

.mytoast {
  padding: 0;
  margin: 0;
  color: white;
  opacity: 0;
  animation: fadein 0.5s forwards;
  width: 250px;
  height: 140px;
  float: left;
  background-color: rgba(var(--bs-dark-rgb), 1);
  color: white;
  border-radius: 0.25rem;
}

.mytoast-title {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  height: 35px;
  font-weight: 700;
  border-style: solid;
  border-bottom-width: 3px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.mytoast-message {
  padding: 0.3rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  height: 110px;
  font-size: 12px;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
}

.mytoast.info .mytoast-title {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: #17a2b8;
}

.mytoast.success .mytoast-title {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: var(--color-sf-primary);
}

.mytoast.warning .mytoast-title {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: #ffc107;
}

.mytoast.error .mytoast-title {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: #dc3545;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.alert.alert-warning p {
  color: var(--color-sf-surface) !important;
}

.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
  background: var(--color-theme-3) !important;
}

.e-tab.e-fill .e-tab-header .e-toolbar-item .e-tab-wrap {
  color: var(--color-theme-3) !important;
}

.e-tab.e-fill .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text, .e-tab.e-fill .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
  color: var(--color-theme-1) !important;
}

.e-tab .e-tab-header:not(.e-vertical)::before {
  border-width: 0 !important;
  background-color: #2d2f31;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
  border: 0 solid #dee2e6 !important;
  border-radius: 0 !important;
}

.e-tab .e-tab-header .e-toolbar-item.e-active:hover {
  background: none !important;
  border-radius: 0 !important;
}

.e-toolbar .e-toolbar-items {
  background: rgba(var(--bs-dark-rgb), 1) !important;
}

.e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
  color: #ffffff !important;
}

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

.e-diagram .e-ruler {
  background: rgba(var(--bs-dark-rgb), 1) !important;
  color: #6c757d !important;
}

.e-diagram .e-ruler-overlap {
  background: rgba(var(--bs-dark-rgb), 1) !important;
}

.e-toolbar {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  background: #2b2b2b !important;
  border: 0 solid #dee2e6 !important;
}

.e-toolbar .e-toolbar-item .e-tbar-btn {
  background: #565759 !important;
  color: #212529 !important;
}

.e-dropdown-popup {
  background: #373737 !important;
  color: #cfcfcf !important;
}

.e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
  background: #3b3b3b !important;
  border-color: #7b7b7b !important;
}

.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-acrdn-header-content {
  color: #65a3ff !important;
}

.e-accordion {
  border: 1px solid #b3d1ef !important;
  background: #3f3f3f !important;
}

.e-symbolpalette .e-acrdn-content {
  background-color: rgb(26, 28, 22) !important;
}

.e-accordion .e-acrdn-item:first-child .e-acrdn-header:focus {
  border-radius: 0 0 0 0 !important;
  border-width: 0px !important;
}

.markdown-editor textarea {
  color: white !important;
}

#markdown-preview h1, #markdown-preview h2, #markdown-preview h3, #markdown-preview h4, #markdown-preview h5, #markdown-preview h6, #markdown-preview p {
  font-family: Arial, Helvetica, sans-serif !important;
  margin-bottom: 1.25rem !important;
}

.e-diagram-border {
  stroke: #78a7f1 !important;
  stroke-width: 5px;
}

.e-diagram {
  background-color: #333 !important;
}

.e-diagram-endpoint-handle {
  fill: red !important;
  stroke: green !important;
}

/*.e-diagram-pivot-line {
    stroke: red !important;
    stroke-width: 7 !important;
}*/
.e-diagram-highlighter {
  stroke: red !important;
  stroke-width: 4 !important;
}

.e-symbolpalette .e-symbol-hover:hover {
  background: #78a7f1 !important;
}

.e-symbolpalette .e-symbol-hover {
  color: #78a7f1 !important;
}

ul.e-control.e-contextmenu.e-lib.e-menu-parent {
  background-color: #333 !important;
  border: solid white 1px !important;
}

.e-diagram-resize-handle {
  fill: #78a7f1 !important;
  opacity: 1;
  stroke: white !important;
  stroke-width: 2px !important;
}

.e-diagram-helper {
  stroke: #78a7f1 !important;
  stroke-width: 3px !important;
}

.e-diagram .e-bounding-box {
  fill: none;
  stroke: green !important;
  stroke-width: 2px !important;
  stroke-dasharray: 4 !important;
}

.e-diagram-bezier-line {
  stroke: white;
  stroke-width: 3px;
}

.e-diagram-resize-handle {
  fill: white;
  opacity: 1;
  stroke: white;
}

.e-diagram-resize-handle.e-hover {
  fill: #78a7f1 !important;
  opacity: 1;
  stroke: white !important;
  stroke-width: 2px !important;
  cursor: pointer !important;
}

.e-diagram .e-diagram-user-handle {
  border: 2px dashed #0078d4 !important; /* Customize the border style and color */
  background-color: green !important;
}

.e-diagram .e-diagram-helper {
  border: 2px dashed #0078d4 !important; /* Customize the border style and color */
  background-color: rgba(0, 120, 212, 0.1) !important; /* Customize the background color with transparency */
}

.e-switch-wrapper:hover .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active {
  background-color: #555 !important;
  border-color: rgba(var(--color-sf-primary)) !important;
}

.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
  background-color: var(--color-sf-success) !important;
}

.e-switch-wrapper .e-switch-off, .e-css.e-switch-wrapper .e-switch-off {
  background-color: red !important;
}

.light-mode .e-switch-wrapper .e-switch-inner.e-switch-active, .light-mode .e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
  background-color: #ebf3c8 !important;
}

.light-mode .e-switch-wrapper .e-switch-handle, .e-css.e-switch-wrapper .e-switch-handle {
  height: 40px !important;
  width: 40px !important;
  margin-top: 4px;
}

.light-mode .e-switch-wrapper .e-switch-off, .light-mode .e-css.e-switch-wrapper .e-switch-off {
  background-color: #333 !important;
}

.light-mode .e-switch-wrapper .e-switch-inner, .light-mode .e-css.e-switch-wrapper .e-switch-inner {
  height: 50px !important;
  width: 100px !important;
}

.markdown-content .e-rating-container.custom-font .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.markdown-content .e-rating-container.custom-font .e-rating-item-container .e-rating-icon {
  /* To change rating symbol border color */
  -webkit-text-stroke: 2px #ae9e9d;
}
.markdown-content .e-btn.e-primary, .markdown-content .e-css.e-btn.e-primary {
  background: black !important;
  border: solid 1px #333 !important;
  color: white;
}
.markdown-content .e-btn.e-primary:focus, .markdown-content .e-css.e-btn.e-primary:focus {
  border: solid 1px white !important;
}
.markdown-content .e-fab.e-btn:hover:not(:focus), .markdown-content .e-fab.e-btn:active, .markdown-content .e-fab.e-btn.e-active, .markdown-content .e-fab.e-btn:disabled {
  box-shadow: none !important;
  border: solid 1px white !important;
}
.markdown-content .e-speeddial-popup .e-speeddial-li .e-speeddial-li-icon {
  box-shadow: none;
  background-color: black !important;
  border: solid 1px white !important;
  color: white !important;
}
.markdown-content .e-speeddial-popup .e-speeddial-li .e-speeddial-li-icon:hover {
  border: solid 1px white !important;
}
.markdown-content .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .markdown-content .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
  border-color: #aaa !important;
  box-shadow: none !important;
}

.light-mode .markdown-content .e-btn.e-primary:focus, .light-mode .markdown-content .e-css.e-btn.e-primary:focus {
  color: black !important;
  background: white !important;
  border: solid 1px #bbb !important;
}
.light-mode .markdown-content .e-btn.e-primary, .light-mode .markdown-content .e-css.e-btn.e-primary {
  color: black !important;
  background: white !important;
  border: solid 1px #bbb !important;
}
.light-mode .markdown-content .e-fab.e-btn:hover:not(:focus), .light-mode .markdown-content .e-fab.e-btn:active, .light-mode .markdown-content .e-fab.e-btn.e-active, .light-mode .markdown-content .e-fab.e-btn:disabled {
  box-shadow: none !important;
  border: solid 1px black !important;
}
.light-mode .markdown-content .e-speeddial-popup .e-speeddial-li .e-speeddial-li-icon:hover {
  border: solid 1px black !important;
  background-color: white !important;
  color: black !important;
}
.light-mode .markdown-content .e-speeddial-popup .e-speeddial-li .e-speeddial-li-icon:hover {
  border: solid 1px black !important;
  background-color: white !important;
  color: white !important;
}
.light-mode .markdown-content .e-speeddial-popup .e-speeddial-li:not(.e-disabled):hover {
  border: solid 1px black !important;
  background-color: white !important;
  color: black !important;
}
.light-mode .markdown-content .e-speeddial-popup .e-speeddial-li .e-speeddial-li-icon {
  border: solid 1px black !important;
  background-color: white !important;
  color: black !important;
}
.light-mode .markdown-content .e-speeddial-popup .e-speeddial-li .e-speeddial-li-icon {
  box-shadow: none;
  background-color: white !important;
  border: solid 1px black !important;
  color: black !important;
}
.light-mode .markdown-content input.e-input, .light-mode .markdown-content .e-input-group input.e-input, .light-mode .markdown-content .e-input-group.e-control-wrapper input.e-input, .light-mode .markdown-content .e-input-group textarea.e-input, .light-mode .markdown-content .e-input-group.e-control-wrapper textarea.e-input, .light-mode .markdown-content textarea.e-input, .light-mode .markdown-content .e-float-input input, .light-mode .markdown-content .e-float-input.e-control-wrapper input, .light-mode .markdown-content .e-float-input textarea, .light-mode .markdown-content .e-float-input.e-control-wrapper textarea {
  background: rgba(0, 0, 0, 0);
  border-color: black !important;
  color: black !important;
}
.light-mode .markdown-content .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .light-mode .markdown-content .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
  border-color: #555 !important;
  box-shadow: none !important;
}
.light-mode .markdown-content .e-input-group, .light-mode .markdown-content .e-input-group.e-control-wrapper, .light-mode .markdown-content .e-float-input, .light-mode .markdown-content .e-float-input.e-input-group, .light-mode .markdown-content .e-float-input.e-control-wrapper, .light-mode .markdown-content .e-float-input.e-input-group.e-control-wrapper {
  color: #444 !important;
}
.light-mode .markdown-content .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .light-mode .markdown-content .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
  border-color: #444 !important;
}

.e-rating-container .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container .e-rating-item-container.e-rating-intermediate .e-rating-icon {
  background: linear-gradient(to right, #0d6efd var(--rating-value), transparent var(--rating-value)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-stroke: 1px #0d6efd !important;
}

.e-rating-container .e-rating-item-container .e-rating-icon {
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px transparent !important;
  background: rgba(68, 68, 68, 0.5019607843) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

.user-config-content {
  width: 100%;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: calc((100% - 400px) / 2);
  padding-right: calc((100% - 400px) / 2);
  background-color: var(--bs-body-bg);
}

.user-config-content-outer {
  width: 100%;
  padding: 30px;
  background-color: var(--bs-body-bg);
}

.user-config-content-outer .user-config-content {
  padding: 0 !important;
}

.badge-warning {
  color: #333;
  background-color: rgb(var(--color-sf-warning));
}

.badge-primary {
  color: white;
  background-color: var(--color-sf-primary);
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 2;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

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

@keyframes slideFadeIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideFadeOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.slide-fade-in {
  animation: slideFadeIn 0.5s forwards;
}

.slide-fade-out {
  animation: slideFadeOut 0.5s forwards;
}

.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-text, .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
  color: white !important;
}

.label-primary {
  background-color: var(--color-sf-primary);
}

.label-warning {
  background-color: rgb(var(--color-sf-warning));
}

.label-danger {
  background-color: rgb(var(--color-sf-error));
  color: #333;
}

.label {
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}

#reader-content img {
  width: 100%;
  object-fit: contain;
  max-height: 70vh;
}

.spinner-modal {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: fixed !important;
  top: 0px;
  left: 0px;
}

.e-skeleton.e-skeleton-text, .e-skeleton.e-skeleton-square, .e-skeleton.e-skeleton-rectangle, .e-skeleton.e-skeleton-circle {
  background: rgba(var(--bs-dark-rgb), 0.5) !important;
}