/* @import './font.css'; */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
  --mantine-color-primary-0: #f0fdf4;
  --mantine-color-primary-1: #dcfce7;
  --mantine-color-primary-2: #bbf7d0;
  --mantine-color-primary-3: #86efac;
  --mantine-color-primary-4: #4ade80;
  --mantine-color-primary-5: #22c55e;
  --mantine-color-primary-6: #16a34a;
  --mantine-color-primary-7: #166534;
  --mantine-color-primary-8: #14532d;
  --mantine-color-primary-9: #052e16;
  --mantine-color-primary-light: rgba(134, 239, 172, 0.15);

  --primary: var(--mantine-color-primary-5); /* rgb(242, 117, 57) */
  --primary-darken: #ff3800;
  --to: #ffc900;

  --primary-darken-transparent: #ff370010;
  --to-transparent: #ffc90010;

  --gradient: linear-gradient(90deg, var(--primary-darken), var(--to));
  --gradient-transparent: linear-gradient(90deg, var(--primary-darken-transparent), var(--to-transparent));

  --base-link: var(--primary);
  --nav-item-text-active: var(--primary);
  --nav-item-border-active: var(--primary);
  --base-border-hover: var(--mantine-color-primary-7);
  --nav-item-bg-active: var(--mantine-color-primary-light);
}
body > * {
  --base-link: var(--primary);
  --nav-item-text-active: var(--primary);
  --nav-item-border-active: var(--primary);
  --base-border-hover: var(--mantine-color-primary-7);
  --nav-item-bg-active: var(--mantine-color-primary-light);
}

h1 *,
h2 *,
h3 *,
h4 *,
h5 * {
  font-family: Geist !important;
  font-weight: 400;
}

#danger-must-read * {
  color: var(--primary) !important;
}

.bg-blue-100 {
  background-color: rgba(242, 117, 57, 0.2) !important;
}

.bg-blue-500 {
  background-color: rgba(242, 117, 57, 0.6) !important;
}

.hover\:bg-blue-200:hover {
  background-color: rgba(242, 117, 57, 0.2) !important;
}

.group:hover .group-hover\:text-blue-500 {
  color: rgba(242, 117, 57, 0.6) !important;
}

.text-blue-500 {
  color: var(--primary) !important;
}
.hover\:text-blue-500:hover {
  color: var(--primary) !important;
}
.hover\:text-blue-800:hover {
  color: var(--primary) !important;
}

@media (min-width: 960px) {
  .md\:text-blue-500 {
    color: var(--primary) !important;
  }
}

.docs-markdown a:not(.no-link) {
  color: var(--primary) !important;
}

.docs-markdown h1 .header-anchor-trigger:hover,
.docs-markdown h2 .header-anchor-trigger:hover,
.docs-markdown h3 .header-anchor-trigger:hover,
.docs-markdown h4 .header-anchor-trigger:hover,
.docs-markdown h5 .header-anchor-trigger:hover,
.docs-markdown h6 .header-anchor-trigger:hover {
  color: var(--primary-darken) !important;
}

html {
  font-size: 18px;
  overflow-y: scroll;
}

::selection {
  background-color: rgba(242, 117, 57, 0.2);
}

#docs-site-logo {
  font-size: 2rem !important;
}

#docs-site-logo span:last-child {
  margin-top: 8px;
}

#docs-site-logo * {
  font-family: Geist !important;
  font-weight: 400;
}

.font-body {
  font-family: Geist !important;
  font-weight: 400 !important;
}

.dark .dark\:bg-dark-850 {
  background: black !important;
}

.dark .dark\:bg-dark-800 {
  background: black !important;
}

.bg-white .black {
  display: none !important;
}

.dark .black {
  display: block !important;
}

.dark .white {
  display: none !important;
}

.dark strong {
  color: white;
}

.no-points ul {
  list-style-type: none !important;
  padding-left: 1rem !important;
}
.no-points ul ul {
  list-style-type: none !important;
}
.no-points ul li svg {
  margin-right: 0.5rem !important;
}

.plus ul {
  list-style-type: '+  ' !important;
}

.minus ul {
  list-style-type: '-  ' !important;
}

.img-link {
  div {
    padding: 0px !important;
  }
  > div {
    border: none !important;

    > div:nth-child(2) {
      display: none;
    }
  }
  .ml-2 {
    margin-left: 0px !important;
  }
  svg {
    display: none !important;
  }
  .content-center {
    margin-bottom: 0px !important;
  }
}

.height-600 {
  > div {
    justify-content: center;
  }

  img {
    max-height: 600px;
  }
}

.height-500 {
  > div {
    justify-content: center;
  }

  img {
    max-height: 500px;
  }
}

.height-300 {
  > div {
    justify-content: center;
  }
  img {
    max-height: 300px;
  }
}

.height-250 {
  > div {
    justify-content: center;
  }
  img {
    max-height: 250px;
  }
}

.height-200 {
  > div {
    justify-content: center;
  }
  img {
    max-height: 200px;
  }
}