:root {
  /* COLORS */
  /* Surface colors */
  --documentation-surface-darker: #080808;
  --documentation-surface-dark: #121212;
  --documentation-surface-medium: #252525;
  --documentation-surface-light: #393939;
  /* Primary colors */
  --gpal-blue-docs: #00aacb;
  --gpal-blue-docs-close: #3db3d0;
  --gpal-blue-docs-light: #5bbbd6;
  --gpal-blue-docs-lighter: #73c4db;
  /* Success Colors */
  --docs-success-accent: #22946e;
  --docs-success-accent-light: #5ba989;
  --docs-success-accent-lighter: #86bfa6;
  /* Danger Colors */
  --docs-danger-accent: #9c2121;
  --docs-danger-accent-light: #b4544c;
  --docs-danger-accent-lighter: #ca7f77;

  /* Code Sample Subsystem Title BG */
  --docs-code-sample-title-bg: linear-gradient(
    var(--documentation-surface-dark),
    var(--documentation-surface-darker) 70%
  );

  /**Theme tonal surface colors
    --clr-surface-tonal-a0: #171f21;
    --clr-surface-tonal-a10: #2a3234;
    --clr-surface-tonal-a20: #3e4547;

    Success colors
    --clr-success-a0: #22946e;
    --clr-success-a10: #5ba989;
    --clr-success-a20: #86bfa6;

    Warning colors
    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #ba945a;
    --clr-warning-a20: #cbae84;

    Danger colors
    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #b4544c;
    --clr-danger-a20: #ca7f77;

    Info colors
    --clr-info-a0: #21498a;
    --clr-info-a10: #4b6ca2;
    --clr-info-a20: #7590ba; */
}

.hidden {
  display: none;
}
body {
  background-color: var(--documentation-surface-dark);
}

.content-section {
  margin-top: 10px;
  padding-bottom: 10px;
  color: white;
  min-height: 70vh;
}

.content-section .row,
.content-section .container {
  min-height: 70vh;
}

.docs-content h1 {
  font-weight: bold;
  font-size: 3rem;
}

.docs-content h2 {
  font-weight: bold;
  font-size: 2rem;
}

.docs-content h3 {
  font-weight: bold;
  font-size: 1.5rem;
}

.docs-content h4 {
  font-size: 1.5rem;
}

.docs-content p {
  text-align: justify;
}

.docs-content .docs-accent-blue {
  color: var(--gpal-blue-docs-lighter);
  font-weight: bold;
}

.docs-content .docs-accent-link-bold {
  color: var(--gpal-blue-docs-lighter);
  text-decoration: underline;
  font-weight: bold;
}

.docs-content .docs-accent-link-bold:hover {
  color: var(--gpal-blue-docs);
  cursor: pointer;
}

.docs-content .docs-accent-link {
  color: var(--gpal-blue-docs-lighter);
  text-decoration: underline;
}

.docs-content .docs-accent-link:hover {
  color: var(--gpal-blue-docs);
  cursor: pointer;
}

.docs-content .docs-accent-sucess {
  color: var(--docs-success-accent);
}

.docs-content .docs-accent-sucess-light {
  color: var(--docs-success-accent-light);
}

.docs-content .docs-accent-sucess-lighter {
  color: var(--docs-success-accent-lighter);
}

.docs-content .docs-accent-danger {
  color: var(--docs-danger-accent);
}

.docs-content .docs-accent-danger-light {
  color: var(--docs-danger-accent-light);
}

.docs-content .docs-accent-danger-lighter {
  color: var(--docs-danger-accent-lighter);
}

.docs-content div {
  margin-bottom: 1rem;
}

.docs-content .paragraph-with-image img {
  max-width: 40%;
  margin: 0 1rem;
  border-radius: 10px;
}

.docs-content .just-image img {
  max-width: 100%;
  border-radius: 10px;
}

.fieldset {
  position: relative;
  border: 1px solid var(--documentation-surface-light);
  border-radius: 8px;
  padding: 1rem 0.5rem 0.5rem;
  margin-top: 1rem;
  display: block;
  text-decoration: none;
  color: white;
}

.endpoint-fieldset:hover {
  border: 1px solid var(--documentation-surface-light);
  background: var(--documentation-surface-light);
}

.endpoint-fieldset:hover .fieldset-title {
  background: var(--documentation-surface-light);
}

.fieldset p {
  margin-bottom: 0.5rem;
}

.fieldset-title {
  position: absolute;
  top: -8px;
  left: 14px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--documentation-surface-dark);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.warning-fieldset {
  border-color: var(--docs-danger-accent-lighter);
}
.warning-fieldset span {
  color: var(--docs-danger-accent-lighter);
}

.tip-fieldset {
  border-color: var(--docs-success-accent-lighter);
}
.tip-fieldset span {
  color: var(--docs-success-accent-lighter);
}

.docs-content .docs-code-sample .docs-sample-subsystem {
  position: absolute;
  top: -8px;
  right: 14px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--docs-code-sample-title-bg);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.docs-content .docs-code-sample {
  border: var(--documentation-surface-light) 1px solid;
  background: var(--documentation-surface-darker);
  padding: 1.5rem;
  border-radius: 10px;
  margin: 0 0 1rem 0;
  font-family: monospace;
  position: relative;
}

.docs-content .docs-code-sample p {
  margin: 0;
}

.docs-content .docs-code-sample .indent-1 {
  padding-left: 0.75rem;
}
.docs-content .docs-code-sample .indent-2 {
  padding-left: 1.5rem;
}
.docs-content .docs-code-sample .indent-3 {
  padding-left: 2.25rem;
}
.docs-content .docs-code-sample .indent-4 {
  padding-left: 3rem;
}

.docs-code-sample .code-comment {
  color: var(--docs-success-accent-light);
}

.aside {
  background: var(--documentation-surface-medium);
  height: fit-content;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  position: sticky;
  top: 75px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.aside::-webkit-scrollbar {
  width: 6px;
}

.aside::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.aside h4 {
  font-weight: bold;
  font-size: 1.1rem;
  margin: 0.5rem;
  font-family: var(--content-font);
}

.aside ul {
  margin-left: 1rem;
}

.aside li {
  margin: 2px 0px;
  padding: none;
  border-radius: 5px;
}

.aside li a {
  width: 100%;
  height: 100%;
  display: block;
  padding: 2px 2px 2px 5px;
  text-decoration: none;
  color: white;
}

.aside li:hover {
  background: var(--gpal-blue-docs);
  color: rgb(25, 25, 25);
  cursor: pointer;
}

.aside li:hover a {
  color: rgb(25, 25, 25);
}

.aside li.active {
  background: var(--gpal-blue-docs);
  cursor: pointer;
}

.side-nav {
  background: var(--documentation-surface-medium);
  height: fit-content;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  position: sticky;
  top: 75px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.side-nav::-webkit-scrollbar {
  width: 6px;
}

.side-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.side-nav h5,
.side-nav li {
  font-weight: normal;
  font-size: 1rem;
  margin: 0;
  font-family: var(--content-font);
  margin: 5px 0px;
  list-style: none;
}

.side-nav a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  padding-left: 5px;
  color: white;
  border-left: 2px transparent solid;
}

.side-nav .indent-1 {
  padding-left: 0.8rem;
}
.side-nav .indent-2 {
  padding-left: 1.6rem;
}
.side-nav .indent-3 {
  padding-left: 2.4rem;
}
.side-nav .indent-4 {
  padding-left: 3.2rem;
}

.side-nav h5:hover a,
.side-nav li:hover a {
  border-left: 2px var(--gpal-blue-docs) solid;
  cursor: pointer;
  color: var(--gpal-blue-docs-light);
}

.scroll-margin {
  scroll-margin-top: 75px;
}