*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  min-height: 100%;
  color-scheme: light;
  background: var(--logos-bg);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--logos-bg);
  color: var(--logos-ink);
  font-family: var(--logos-font-fa);
  direction: rtl;
}

body,
button,
input,
select,
textarea {
  font-family: var(--logos-font-fa);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
a[href],
select,
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
picture,
object {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

li {
  list-style: none;
}

input,
select,
textarea {
  width: 100%;
  border-radius: var(--logos-radius-sm);
  color: var(--logos-ink);
}

textarea {
  resize: vertical;
}

select {
  appearance: none;
  -webkit-appearance: none;
}

dialog {
  padding: 0;
  border: 0;
  color: inherit;
}

[hidden] {
  display: none !important;
}

::selection {
  color: var(--logos-deep-3);
  background: rgba(35, 221, 160, 0.26);
}

:focus {
  outline: none;
}

:focus-visible {
  outline:
    2px solid var(--logos-mint);
  outline-offset: 4px;
}

.logos-document {
  width: 100%;
  height: 100%;
}

.logos-body {
  position: relative;
  isolation: isolate;
}

.logos-main {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
}

.logos-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.logos-skip-link {
  position: fixed;
  top: calc(
    var(--logos-safe-top) + 0.75rem
  );
  right: calc(
    var(--logos-safe-right) + 0.75rem
  );
  z-index: var(--logos-z-skip);
  padding: 0.8rem 1.1rem;
  border-radius: var(--logos-radius-sm);
  color: var(--logos-white);
  background: var(--logos-deep-3);
  box-shadow: var(--logos-shadow-md);
  font-size: 0.875rem;
  font-weight: 800;
  transform: translateY(-180%);
  transition:
    transform var(--logos-duration-normal)
    var(--logos-ease);
}

.logos-skip-link:focus {
  transform: translateY(0);
}

:is(
  .logos-module-panel__body,
  .logos-demo-dialog__content
) {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(0, 95, 67, 0.25)
    transparent;
}

:is(
  .logos-module-panel__body,
  .logos-demo-dialog__content
)::-webkit-scrollbar {
  width: 0.42rem;
}

:is(
  .logos-module-panel__body,
  .logos-demo-dialog__content
)::-webkit-scrollbar-track {
  background: transparent;
}

:is(
  .logos-module-panel__body,
  .logos-demo-dialog__content
)::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0, 95, 67, 0.2);
}

:is(
  .logos-module-panel__body,
  .logos-demo-dialog__content
)::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 95, 67, 0.36);
}