body {
  background-color: var(--color-canvas-100);
  height: 100vh;
}

.sl-stack--5 {
  gap: 8px !important;
}

.sl-stack--8 {
  gap: 20px !important;
}

.sl-stack--10 {
  gap: 24px !important;
}

.token.punctuation {
  color: white !important;
}

.token.string,
.token.request-line.request-target.url {
  color: #a5d6ff !important;
}

.token.function,
.token.method.function.property-access {
  color: #ccb1ff !important;
}

.token.console.class-name {
  color: #a6f9ba !important;
}

.sl-sticky a.sl-flex.sl-items-center.sl-px-4.sl-py-3.sl-border-t {
  display: none !important;
}

.sl-px-24 {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.sl-py-16 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

@media (max-width: 980px) {
  .sl-py-16 {
    padding-top: 80px !important;
  }
}

div[data-testid="two-column-right"] {
  max-width: none !important;
  width: 60% !important;
  margin-left: 36px;
}

.sl-text-danger-light {
  color: #ee4b4b !important;
}

.sl-flex.sl-overflow-y-auto.sl-flex-col.sl-sticky.sl-inset-y-0.sl-pt-8.sl-bg-canvas-100.sl-border-r
  .sl-flex.sl-items-center.sl-mb-5.sl-ml-4 {
  margin: 0;
}

.sl-flex.sl-overflow-y-auto.sl-flex-col.sl-sticky.sl-inset-y-0.sl-pt-8.sl-bg-canvas-100 {
  background-color: var(--color-canvas-200);
}

.sl-flex.sl-overflow-y-auto.sl-flex-col.sl-sticky.sl-inset-y-0.sl-pt-8.sl-bg-canvas-100
  .sl-bg-canvas-100 {
  background-color: var(--color-canvas-200);
}

.sl-flex.sl-overflow-y-auto.sl-flex-col.sl-sticky.sl-inset-y-0.sl-pt-8.sl-bg-canvas-100.sl-border-r {
  border-right: 0;
}

.sl-inline.sl-overflow-x-hidden.sl-overflow-y-hidden.sl-mr-3.sl-rounded-lg {
  margin: 10px 0 30px;
}

/* overwrite --color-danger variable */
[data-theme="dark"] * {
  --color-danger: #ee4b4b !important;
  --color-warning: #cc8c00 !important;
  --color-canvas-50: #121417 !important;
  --color-canvas-100: #0a0a0c !important;
  --color-canvas-200: #060708 !important;
  --color-canvas-300: #141a24 !important;
  --color-canvas-400: #121721 !important;
  --color-canvas-500: #121721 !important;
  --gray-600: rgb(28, 28, 29) !important;
  --gray-800: rgb(38, 38, 39) !important;
  --color-canvas: #0a0b0f !important;
  --color-primary: #3064e3 !important;
  --color-primary-light: #487dff !important;
  --color-primary-dark: #2853b8 !important;
  --color-primary-tint: #121417 !important;
  --color-success-light: #1ec280 !important;
}

/* width */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-canvas-500);

  background-clip: padding-box;
  border: 4px solid rgba(0, 0, 0, 0);
  /* border-radius: 5px; */
  /* margin-block: 15px; */
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  cursor: grab;
}

.sl-font-medium.sl-uppercase.sl-text-success {
  color: var(--color-success-light);
}

.SendButtonHolder {
  margin-top: 10px;
  margin-bottom: 15px;
  padding: 0px 12px;
  text-align: center;
}

.SendButtonHolder button {
  padding: 15px;
  border-radius: 8px;
}

.SendButtonHolder button.sl-cursor-wait {
  background-color: var(--color-primary-dark);
}

.SendButtonHolder button .fa-spinner,
.SendButtonHolder button .sl-mr-1 {
  display: none;
}

.sl-panel {
  border-radius: 0.75rem;
  border: 1px solid var(--gray-800);
  overflow: hidden;
}

.sl-pb-1 .sl-panel.sl-outline-none.sl-w-full {
  margin-top: 24px;
}

.sl-panel__titlebar {
  padding: 8px 16px;
  font-size: 14px !important;
  border-bottom: 1px solid var(--gray-600);
}

.sl-panel__titlebar.focus\:sl-border-primary:focus {
  border-color: inherit;
  border-width: none;
}

.sl-panel__titlebar[aria-expanded="false"] {
  border-bottom: none;
}

.sl-panel__content-wrapper .ParameterGrid {
  padding: 14px 20px;
  margin-bottom: 0px;
}

.sl-drawer-container.in.open .left,
.sl-drawer-container.in.open .right {
  min-width: 250px;
}

.sl-pl-2\.5 {
  padding-left: 8px;
}

.fa-bullseye {
  color: rgb(77, 156, 255) !important;
}

.sl-text-base {
  font-size: 14px;
}

.sl-stack.sl-stack--horizontal.sl-stack--3.sl-inline-flex.sl-flex-row.sl-items-center.sl-max-w-full.sl-font-mono.sl-py-2.sl-pr-4.sl-bg-canvas-50.sl-rounded-lg {
  border-radius: 0.75rem;
  border: 1px solid var(--gray-800);
  overflow: hidden;
  margin-top: 5px;
}

.sl-text-lg.sl-font-semibold.sl-uppercase.sl-py-1.sl-bg-success.sl-text-on-primary.sl-rounded-lg {
  padding-bottom: 3px;
  border-radius: 8px;
}

/* Hide Logos */
.sl-text-paragraph.sl-leading-snug.sl-font-prose.sl-font-semibold.sl-text-heading {
  display: none;
}

.sl-flex.sl-items-center.sl-px-4.sl-py-3.sl-border-t {
  display: none;
}

.sl-sticky img,
.sl-drawer img {
  width: 180px;
}

.sl-drawer .sl-flex.sl-items-center.sl-mb-5.sl-ml-4 {
  margin: 0;
  justify-content: center;
}

.sl-drawer
  .sl-inline.sl-overflow-x-hidden.sl-overflow-y-hidden.sl-mr-3.sl-rounded-lg {
  border-radius: 0px;
}

.sl-sticky div.sl-flex.sl-items-center {
  justify-content: center;
}

.sl-sticky div.sl-flex.sl-items-center .sl-rounded-lg {
  border-radius: 0px;
}

.token.property {
  color: var(--color-text) !important;
}

.token.number,
.token.boolean {
  color: #2088ff !important;
}

.sl-leading-relaxed {
  display: none;
}

.sl-my-3 .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-4 {
  padding: 6px 16px;
  height: inherit;
}

.sl-my-3 .sl-flex.sl-items-center.sl-h-md.sl-pr-4.sl-pl-4:not(#sl-toc-\/) {
  background-color: inherit;
}

#sl-toc-\/ {
  margin-bottom: 12px;
}

/* where data-test="property-required" set the color to primary */
[data-test="property-required"] {
  color: var(--color-primary);
}

/* overview page */
.HttpService .sl-badge {
  margin-bottom: 0;
}

[data-test="server-row"] {
  border: none;
}

.HttpService .sl-self-stretch.sl-border-t {
  display: none;
}

.HttpService [data-test="server-row"] .sl-panel__titlebar {
  background-color: transparent;
  padding: 0px;
  border-bottom: none;
  overflow: hidden;
  border-radius: 0.75rem;
}

.HttpService [data-test="server-row"] .sl-panel__titlebar div {
  min-height: 0 !important;
}

.HttpService [data-test="server-row"] .sl-font-bold {
  color: var(--color-text);
}

.HttpService [data-test="server-row"] .sl-font-normal {
  color: var(--color-primary-light);
}

.HttpService
  [data-test="servers"]
  .sl-panel__content-wrapper.sl-bg-canvas-100
  .sl-p-4 {
  padding: 8px 16px;
}

.sl-panel__content-wrapper.sl-bg-canvas-100 {
  background-color: var(--color-canvas);
}

.HttpService .sl-stack.sl-stack--vertical {
  gap: 6px;
}

.sl-elements .OperationParametersContent {
  max-height: none;
}

.sl-markdown-viewer.HttpOperation__Description pre.sl-code-viewer {
  background-color: var(--color-canvas-200);
}

html {
  background-color: #0a0a0c !important;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
  animation-delay: 0.5s;
}

#footer-image {
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  opacity: 0.1;
  width: 100px;
  margin-bottom: 40px;
}

#modules {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.module {
  border: 1px solid var(--gray-600);
  background-color: var(--color-canvas-200);
  padding: 15px 20px;
  width: 250px;
  height: 150px;
  border-radius: 0.75rem;
  text-align: center;
  margin: 10px;
  position: relative;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: border-color 0.5s;
}

.module:hover {
  border-color: var(--color-primary);
}

.module .module-name {
  font-weight: bold;
}

.module .module-info {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-top: 5px;
  flex: 1;
}

.module .module-url {
  color: var(--color-primary-light);
  font-size: 12px;
}

#modules.header {
  width: 100%;
  padding: 0px;
  text-align: left;
  box-shadow: 0px -5px 100px 0px #3064e336;
  z-index: 9999;
}

#modules.header .module {
  padding: 10px 15px 8px;
  height: auto;
  width: auto;
  font-weight: normal;
  font-size: 14px;
  border-radius: 0;
  margin: 0;
  border-color: transparent;
  transition: color 0.3s;
  border-bottom: 2px solid transparent;
}

#modules.header .module:hover {
  color: var(--color-primary-light);
}

#modules.header .module .module-name {
  font-weight: 500;
  letter-spacing: 0.05em;
}

#modules.header .module .module-url {
  display: none;
}

#modules.header .module .module-info {
  display: none;
}

#modules.header .module.active {
  border-bottom: 2px solid var(--color-primary);
}

#docs-container {
  position: relative;
  text-align: left;
  width: 100%;
  background-color: var(--color-canvas-100);
}

elements-api {
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* width: 100%;
  height: 100%; */
  visibility: hidden;
}

.loader {
  filter: blur(8px);
  opacity: 0.3;
  width: 48px;
  height: 48px;
  border: 5px solid white;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}

/* Login */
.login-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 320px;
  z-index: 10000;
  background: var(--color-canvas-200);
  border: 1px solid var(--gray-600);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.login-step.hidden,
.login-success.hidden {
  display: none;
}

.login-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.login-panel input[type="email"],
.login-panel input[type="password"],
.login-panel input[type="text"] {
  width: 100%;
  background: var(--color-canvas-300);
  border: 1px solid var(--gray-600);
  color: var(--color-text);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.login-panel button[type="submit"] {
  width: 100%;
  background: var(--color-primary);
  border: 0;
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.login-panel button[type="submit"].sl-cursor-wait {
  background: var(--color-primary-dark);
}

.login-error {
  color: var(--color-danger);
  margin-top: 8px;
  min-height: 18px;
}

.login-success-text {
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.access-code {
  display: inline-block;
  background: var(--color-canvas-300);
  border: 1px solid var(--gray-600);
  padding: 8px 10px;
  border-radius: 8px;
}

#er-diagram iframe {
  width: 100%;
  height: 1000px;
  border: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}