@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --scheme-main: #070707 !important;
  --scheme-main-bis: #101010 !important;
  --scheme-main-ter: #161616 !important;
  --scheme-invert: #f2f2f2 !important;
  --scheme-invert-bis: #d8d8d8 !important;
  --scheme-invert-ter: #a8a8a8 !important;
  --primary: #f2f2f2 !important;
  --primary-invert: #070707 !important;
  --link: #d0d0d0 !important;
  --link-hover: #ffffff !important;
  --text: #f2f2f2 !important;
  --text-strong: #ffffff !important;
  --text-light: #9a9a9a !important;
  --border: #2a2a2a !important;
  --border-hover: #444444 !important;
  --background: #070707 !important;
  --background-hover: #121212 !important;
  --white: #070707 !important;
  --white-ter: #101010 !important;
  --white-bis: #161616 !important;
  --black: #f2f2f2 !important;
  --black-ter: #bdbdbd !important;
  --black-bis: #d8d8d8 !important;
  --grey-darker: #bdbdbd !important;
  --grey-dark: #9a9a9a !important;
  --grey: #666666 !important;
  --grey-light: #2a2a2a !important;
  --grey-lighter: #161616 !important;
  --grey-lightest: #101010 !important;
  --danger: #ff4444 !important;
  --success: #d8d8d8 !important;
  --warning: #bdbdbd !important;
  --info: #9a9a9a !important;
}

html,
body,
#app,
.app,
.content,
main {
  background: #070707 !important;
  color: #f2f2f2 !important;
  font-family: "IBM Plex Sans", system-ui, sans-serif !important;
}

*:not(img.logo):not(.cursor-brand):not(.cursor-brand-label) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.navbar,
.menu,
.sidebar,
.modal,
.card,
.box,
.dropdown-content,
.panel,
.menu-list,
.menu-list a,
.input,
.textarea,
.select select,
.button,
.tag,
.notification,
.table,
.tabs,
.footer,
.popover,
.dropdown-menu,
.modal-card,
.menu-label,
.menu-item,
.content,
.hero,
.section {
  background: #101010 !important;
  color: #f2f2f2 !important;
  border-color: #2a2a2a !important;
}

.navbar,
.sidebar,
.modal-card-head,
.modal-card-foot,
.card-header,
.menu-list a:hover,
.button:hover,
.input:focus,
.textarea:focus,
.select select:focus {
  background: #161616 !important;
}

.button.is-primary,
.button.is-link,
.button.is-success,
.tag.is-primary,
.tabs li.is-active a {
  background: #f2f2f2 !important;
  color: #070707 !important;
  border: 1px solid #f2f2f2 !important;
}

.button.is-light,
.button.is-ghost,
.button.is-text {
  background: transparent !important;
  color: #d8d8d8 !important;
  border: 1px solid #2a2a2a !important;
}

a,
.link,
.menu-list a {
  color: #d8d8d8 !important;
}

a:hover,
.menu-list a.is-active {
  color: #ffffff !important;
}

.input,
.textarea,
.select select {
  background: #070707 !important;
  color: #f2f2f2 !important;
  border: 1px solid #2a2a2a !important;
}

::placeholder {
  color: #666666 !important;
}

.cursor-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.55rem !important;
  flex-wrap: nowrap !important;
  max-inline-size: none !important;
  max-block-size: none !important;
  vertical-align: middle !important;
}

.cursor-brand-label {
  display: inline-block !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: clamp(0.68rem, 2.6vw, 0.92rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #f2f2f2 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

img.logo,
.cursor-brand img.logo {
  inline-size: 32px !important;
  block-size: 32px !important;
  min-inline-size: 32px !important;
  min-block-size: 32px !important;
  max-inline-size: 32px !important;
  max-block-size: 32px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 2px solid #3a3a3a !important;
  background: #070707 !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 auto !important;
  filter: none !important;
  opacity: 1 !important;
  aspect-ratio: 1 / 1 !important;
}

.cursor-brand.is-login-logo img.logo {
  inline-size: 72px !important;
  block-size: 72px !important;
  min-inline-size: 72px !important;
  min-block-size: 72px !important;
  max-inline-size: 72px !important;
  max-block-size: 72px !important;
  padding: 6px !important;
}

@media (max-width: 768px) {
  img.logo,
  .cursor-brand img.logo {
    inline-size: 28px !important;
    block-size: 28px !important;
    min-inline-size: 28px !important;
    min-block-size: 28px !important;
    max-inline-size: 28px !important;
    max-block-size: 28px !important;
    padding: 2px !important;
  }

  .cursor-brand.is-login-logo img.logo {
    inline-size: 56px !important;
    block-size: 56px !important;
    min-inline-size: 56px !important;
    min-block-size: 56px !important;
    max-inline-size: 56px !important;
    max-block-size: 56px !important;
    padding: 4px !important;
  }

  .cursor-brand {
    gap: 0.35rem !important;
  }

  .cursor-brand-label {
    letter-spacing: 0.08em !important;
    font-size: 0.62rem !important;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #070707;
}

::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border: 2px solid #070707;
}

::-webkit-scrollbar-thumb:hover {
  background: #444444;
}

hr,
.divider {
  background: #2a2a2a !important;
}

.tag,
.badge,
.chip {
  border: 1px solid #2a2a2a !important;
}

.modal-background {
  background: rgba(0, 0, 0, 0.82) !important;
}

[class*="vikunja" i],
[class*="Vikunja"] {
  text-transform: none !important;
}