.qrl-icon {
  background: url('../media/QRL_icon_black.png') no-repeat center center;
  display: inline-block;
  width:25px;  /*Adjust as needed */
  height: 25px; /*Adjust as needed */
  background-size: contain;
}

.theme-icon__sun,
.theme-icon__moon {
  display: inline-block;
  transition: opacity 0.15s ease;
}

.theme-icon__moon {
  display: none;
}

body.dark-mode .theme-icon__sun,
html.dark-mode .theme-icon__sun {
  display: none;
}

body.dark-mode .theme-icon__moon,
html.dark-mode .theme-icon__moon {
  display: inline-block;
}

.control.has-icons-left {
  width: 100%;
}

.settings-wallet-control {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  width: 100%;
}

.input-wrapper {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.button-wrapper {
  flex: 0 0 auto;
}

/* Additional styles for input and icon as required */
.input {
  width: 100%; /* Make input expand to fill its container */
}


.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full height of the viewport */
  flex-direction: column; /* Aligns children elements vertically */
}


@font-face {
  font-family: 'Comfortaa';
  src: url('../font/Comfortaa-VariableFont_wght.ttf') format('truetype'); /* TTF file */
  /* url('path/to/your/font-file.woff2') format('woff2'); /* WOFF2 file for backup */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Comfortaa', sans-serif; /* Fallback font */
  background-color: whitesmoke;
  color: rgb(18, 1, 1);
  --pi-navbar-logo-bg-light: #ffffff;
  --pi-navbar-logo-bg-dark: #000000;
  --pi-navbar-bg: var(--pi-navbar-logo-bg-light);
  --pi-navbar-text: #0a0a0a;
  --pi-navbar-hover-bg: #f5f5f5;
  --pi-navbar-hover-text: #0a0a0a;
}

/* Keep all embedded Bokeh DOM elements on the same font family in light/dark themes. */
.bk-root,
.bk-root * {
  font-family: 'Comfortaa', sans-serif !important;
}

select {
  padding: 5px;
  border-radius: 4px;
}

.footer {
  background-color: #f5f5f5;
  color: #333; /* This is a dark grey color */
}

#landing-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligns items to the left */
  width: 100%; /* Ensures the column takes full width of its container */
}

#landing-column .custom-icon {
  font-size: 2em; /* Makes the text twice as big */
  vertical-align: middle; /* Vertically aligns text with emojis */
  line-height: 1.5em; /* Adjust line height for proper spacing */
  margin: 10px 0; /* Adds space between the span elements */
}

.landing-hero {
  padding-bottom: 2rem;
}

.landing-hero .landing-citation-card {
  background: rgba(13, 18, 28, 0.78);
  border: 1px solid rgba(226, 232, 240, 0.24);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.landing-hero .landing-citation-card .subtitle {
  color: #edf2f7;
}

.landing-hero .landing-citation-card .subtitle:last-child {
  color: #cbd5e1;
}

.pi-cro-strip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.landing-cro-strip {
  margin-top: 0.75rem;
}

.pi-cro-pill {
  background: linear-gradient(135deg, rgba(9, 14, 25, 0.82), rgba(21, 32, 52, 0.72));
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #edf2f7;
  cursor: help;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.42rem 0.7rem;
  position: relative;
}

.pi-cro-pill:focus {
  outline: 2px solid rgba(96, 165, 250, 0.9);
  outline-offset: 3px;
}

.pi-cro-pill::after {
  background: rgba(6, 10, 18, 0.94);
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 6px;
  bottom: calc(100% + 0.65rem);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
  color: #edf2f7;
  content: attr(data-tooltip);
  font-size: 0.72rem;
  font-weight: 600;
  left: 50%;
  line-height: 1.35;
  max-width: min(18rem, 80vw);
  opacity: 0;
  padding: 0.65rem 0.75rem;
  pointer-events: none;
  position: absolute;
  text-align: left;
  transform: translate(-50%, 0.25rem);
  transition: opacity 0.16s ease, transform 0.16s ease;
  width: max-content;
  z-index: 20;
}

.pi-cro-pill:hover::after,
.pi-cro-pill:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.landing-primary-cta {
  background: linear-gradient(135deg, #2563eb 0%, #0f766e 100%);
  border: 1px solid rgba(191, 219, 254, 0.48);
  box-shadow: 0 14px 30px rgba(14, 165, 233, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-weight: 800;
}

.landing-primary-cta:hover,
.landing-primary-cta:focus {
  border-color: rgba(219, 234, 254, 0.75);
  box-shadow: 0 16px 34px rgba(14, 165, 233, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.login-input {
  width: min(9rem, 100%);
  color: rgb(12, 12, 11);
}

body.dark-mode .login-input,
html.dark-mode body .login-input {
  background-color: #1e1e1e;
  color: #f5f5f5;
  border-color: #333333;
}

.form-button {
  min-width: 5rem;
  width: auto;
  height: 35px;
}

.signup-box {
  margin: auto;
  box-sizing: border-box;
  max-width: 100%;
  width: min(100%, 325px);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
}

.settings-box {
  margin: auto;
  box-sizing: border-box;
  max-width: 100%;
  width: min(100%, 325px);
}

.signup-area {
  padding: clamp(1rem, 4vw, 30px);
}

.signup-subtitle,
.signup-footnote {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
  line-height: 1.35;
}

.signup-subtitle {
  margin: -0.35rem 0 0.95rem;
}

.signup-footnote {
  margin: 0.8rem 0 0;
}

.settings-area {
  padding: clamp(1rem, 4vw, 30px);
}

.navbar,
.navbar.is-white {
  background-color: var(--pi-navbar-bg);
  display: flex;
  justify-content: space-between;
  padding: 10px;
  color: var(--pi-navbar-text);
  text-align: center;
  text-decoration: none;
}

.navbar-menu,
.navbar-start,
.navbar-end,
.navbar-dropdown {
  background-color: var(--pi-navbar-bg);
}

/* Style for the links inside the navigation bar */
.navbar a {
  color: var(--pi-navbar-text);
  text-align: center;
  text-decoration: none;
}

.navbar .navbar-item,
.navbar .navbar-link {
  min-width: 0;
  padding: 0.65rem 0.75rem;
}

.navbar .navbar-link:not(.is-arrowless) {
  padding-right: 2.35rem;
}

.navbar .navbar-link:not(.is-arrowless)::after {
  right: 0.95rem;
}

#loginButtonContainer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#loginButtonContainer .field {
  margin-bottom: 0;
}

#loginButtonContainer .navbar-item {
  padding: 0.25rem;
}

#loginButtonContainer .control.has-icons-left {
  max-width: 100%;
  position: relative;
  width: 9rem;
}

#loginButtonContainer .login-input {
  padding-left: 2.25em;
  width: 100%;
}

#loginButtonContainer .control.has-icons-left .icon.is-left {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 2.25em;
}

#login-button {
  margin: 0.25rem;
}

/* Style for the active link */
.active {
  background-color: #e7e7ef;
  color: rgb(2, 19, 6);
}

/* Style for the link on hover */
.navbar a:hover {
  background-color: var(--pi-navbar-hover-bg);
  color: var(--pi-navbar-hover-text);
}

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

.negative {
  color: red;
  background-color: bisque;
}

.positive {
  color: green;
  background-color: blanchedalmond;
}

.sd-bokeh-select {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 10px 0;
  width: 100%;
}

.sd-bokeh-select .bk-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a4a4a;
}

.sd-bokeh-select .bk-input,
.sd-bokeh-select select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45rem 2.2rem 0.45rem 0.75rem;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  background-color: #ffffff;
  color: #363636;
  appearance: none;
}

body.dark-mode .sd-bokeh-select .bk-form-label,
html.dark-mode body .sd-bokeh-select .bk-form-label {
  color: #d1d5db !important;
}

body.dark-mode .sd-bokeh-select .bk-input,
body.dark-mode .sd-bokeh-select select,
html.dark-mode body .sd-bokeh-select .bk-input,
html.dark-mode body .sd-bokeh-select select {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

.checkbox {
  margin: 10px;

}


.tab {
  margin: 10px;

}

.white-background {
  background-color: white;
}

.lightblue-background {
  background-color: rgb(140, 172, 178);
}

/* Dark mode overrides */
body.dark-mode,
html.dark-mode body {
  background-color: #121212;
  color: #f5f5f5;
  --pi-navbar-bg: var(--pi-navbar-logo-bg-dark);
  --pi-navbar-text: #f5f5f5;
  --pi-navbar-hover-bg: #111111;
  --pi-navbar-hover-text: #ffffff;
}

body.dark-mode .navbar,
body.dark-mode .navbar.is-white,
html.dark-mode body .navbar,
html.dark-mode body .navbar.is-white {
  background-color: var(--pi-navbar-bg);
  color: var(--pi-navbar-text);
}

body.dark-mode .navbar-menu,
body.dark-mode .navbar-start,
body.dark-mode .navbar-end,
body.dark-mode .navbar-dropdown,
html.dark-mode body .navbar-menu,
html.dark-mode body .navbar-start,
html.dark-mode body .navbar-end,
html.dark-mode body .navbar-dropdown {
  background-color: var(--pi-navbar-bg);
}

body.dark-mode .navbar a,
body.dark-mode .navbar .navbar-item,
body.dark-mode .navbar .navbar-link,
html.dark-mode body .navbar a,
html.dark-mode body .navbar .navbar-item,
html.dark-mode body .navbar .navbar-link {
  color: var(--pi-navbar-text);
  background-color: transparent;
}

body.dark-mode .navbar a:hover,
body.dark-mode .navbar .navbar-item:hover,
body.dark-mode .navbar .navbar-link:hover,
html.dark-mode body .navbar a:hover,
html.dark-mode body .navbar .navbar-item:hover,
html.dark-mode body .navbar .navbar-link:hover {
  background-color: var(--pi-navbar-hover-bg);
  color: var(--pi-navbar-hover-text);
}

body.dark-mode .navbar .navbar-item.is-outlined,
html.dark-mode body .navbar .navbar-item.is-outlined {
  border-color: #f5f5f5;
}

body.dark-mode .box,
body.dark-mode .card,
body.dark-mode .white-background,
body.dark-mode .lightblue-background,
html.dark-mode body .box,
html.dark-mode body .card,
html.dark-mode body .white-background,
html.dark-mode body .lightblue-background {
  background-color: #1e1e1e;
  color: #f5f5f5;
  border-color: #2a2a2a;
}

body.dark-mode table,
html.dark-mode body table {
  border-color: #3a3a3a;
}

body.dark-mode th,
body.dark-mode td,
html.dark-mode body th,
html.dark-mode body td {
  border: 1px solid #3a3a3a;
  background-color: #1e1e1e;
  color: #f5f5f5;
}

body.dark-mode .footer,
html.dark-mode body .footer {
  background-color: #1f1f1f;
  color: #c7c7c7;
}

body.dark-mode .footer a,
html.dark-mode body .footer a {
  color: #e5e5e5;
}

body.dark-mode .footer img,
html.dark-mode body .footer img {
  filter: brightness(0.85);
}

body.dark-mode .tabs li a,
html.dark-mode body .tabs li a {
  color: #cfcfcf;
}

body.dark-mode .tabs li.is-active a,
html.dark-mode body .tabs li.is-active a {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

table {
  font-size: 12px;
}



 li {
    /* font-size: 14px; */
    margin-left: 10px;

  }


.content {
    font-size: small;
}

.instruction-block {
  background-color: #f2f2f2; /* Light grey background */
  border: 1px solid #dcdcdc; /* Slightly darker border */
  border-radius: 5px; /* Rounded corners */
  padding: 20px; /* Spacing inside the block */
  margin: 20px auto; /* Center the block with some margin around it */
  width: 80%; /* Width of the block */
  max-width: 600px; /* Maximum width to ensure readability */
  font-family: 'Comfortaa', sans-serif;
  font-size: 14px; /* Legible font size */
  line-height: 1.6; /* Space between lines for readability */
}

body.dark-mode .instruction-block,
html.dark-mode body .instruction-block {
  background-color: #1f1f1f;
  border-color: #333333;
  color: #f1f1f1;
}

body.dark-mode a,
html.dark-mode body a {
  color: #d7e6ff;
}

body.dark-mode .button.is-light,
html.dark-mode body .button.is-light {
  background-color: #2c2c2c;
  color: #f5f5f5;
  border-color: #3a3a3a;
}

body.dark-mode .notification,
html.dark-mode body .notification {
  background-color: #1f1f1f;
  color: #f5f5f5;
  border-color: #333333;
}

body.dark-mode .hero.is-primary,
body.dark-mode .hero.is-link,
html.dark-mode body .hero.is-primary,
html.dark-mode body .hero.is-link {
  background-color: #1c1c1c;
  background-image: none;
}

body.dark-mode .content section.section,
html.dark-mode body .content section.section {
  background-color: transparent;
  color: inherit;
  border-color: transparent;
}

body.dark-mode .section-title,
html.dark-mode body .section-title {
  color: #f5f5f5;
}

body.dark-mode .message,
html.dark-mode body .message {
  background-color: #1f1f1f;
  color: #f5f5f5;
  border-color: #2c2c2c;
}

body.dark-mode .message .message-header,
body.dark-mode .message .message-body,
html.dark-mode body .message .message-header,
html.dark-mode body .message .message-body {
  background-color: transparent;
  color: inherit;
  border-color: inherit;
}

body.dark-mode .message.is-info,
html.dark-mode body .message.is-info {
  background-color: #15304a;
  border-color: #1f4464;
  color: #d7e6ff;
}

body.dark-mode .message.is-info .message-header,
body.dark-mode .message.is-info .message-body,
html.dark-mode body .message.is-info .message-header,
html.dark-mode body .message.is-info .message-body {
  color: inherit;
}

body.dark-mode blockquote,
html.dark-mode body blockquote {
  background-color: #1e1e1e;
  border-left: 4px solid #3a6fb0;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  color: #dbe7ff;
}

body.dark-mode blockquote p,
html.dark-mode body blockquote p {
  color: inherit;
}

body.dark-mode ol,
html.dark-mode body ol {
  color: inherit;
}

body.dark-mode strong,
html.dark-mode body strong {
  color: #fdf5c9;
}

body.dark-mode .content,
html.dark-mode body .content {
  color: #f5f5f5;
}

body.dark-mode .content h1,
body.dark-mode .content h2,
body.dark-mode .content h3,
body.dark-mode .content h4,
body.dark-mode .content h5,
body.dark-mode .content h6,
html.dark-mode body .content h1,
html.dark-mode body .content h2,
html.dark-mode body .content h3,
html.dark-mode body .content h4,
html.dark-mode body .content h5,
html.dark-mode body .content h6 {
  color: #f5f5f5;
}

body.pi-page--regime {
  --pi-regime-background-image: var(
    --pi-regime-background-16x9,
    url('../media/background_16x9_RegimeChangeFractalsChaos.jpg')
  );
  --pi-regime-background-position: center;
  background-color: #14213d;
  isolation: isolate;
  min-height: 100dvh;
}

body.pi-page--regime::before {
  background-image: var(--pi-regime-background-image);
  background-position: var(--pi-regime-background-position);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

.pi-regime-background,
.hero.pi-regime-background.is-primary,
.hero.pi-regime-background.is-link,
body.dark-mode .pi-regime-background,
html.dark-mode body .pi-regime-background,
body.dark-mode .hero.pi-regime-background,
html.dark-mode body .hero.pi-regime-background {
  background-color: transparent;
  background-image: none;
}

.pi-tab-content.pi-regime-background,
.pi-dashboard-shell.pi-regime-background,
.sa-panel.pi-regime-background {
  min-height: calc(100vh - 10rem);
}

.pi-context-mindmap__image {
  display: block;
  width: 100%;
  height: auto;
}

.pi-context-mindmap .pi-context-mindmap__image--dark {
  display: none;
}

body.dark-mode .pi-context-mindmap .pi-context-mindmap__image--light,
html.dark-mode body .pi-context-mindmap .pi-context-mindmap__image--light {
  display: none;
}

body.dark-mode .pi-context-mindmap .pi-context-mindmap__image--dark,
html.dark-mode body .pi-context-mindmap .pi-context-mindmap__image--dark {
  display: block;
}

@media (max-aspect-ratio: 4/5) {
  body.pi-page--regime {
    --pi-regime-background-image: var(
      --pi-regime-background-9x16,
      url('../media/background_9x16_RegimeChangeFractalsChaos.jpg')
    );
    --pi-regime-background-position: center top;
  }
}

@media (min-width: 1600px) and (min-aspect-ratio: 4/5),
       (min-aspect-ratio: 21/9) {
  body.pi-page--regime {
    --pi-regime-background-image: var(
      --pi-regime-background-big,
      url('../media/background_big_RegimeChangeFractalsChaos.jpg')
    );
    --pi-regime-background-position: center;
  }
}