:root {
  /* Abstractions */
  --color-bg: var(--gray-100);
  --color-bg-reverse: white;
  --color-bg-header: var(--zinc-50);
  --color-bg-secondary: var(--stone-300);
  --color-bg-secondary-light: var(--stone-100);
  --color-bg-secondary-dark: var(--stone-500);
  --color-text: black;
  --color-text-reversed: white;
  --color-text-subtle: var(--zinc-500);
  --color-link: var(--blue-700);
  --color-border-light: var(--zinc-100);
  --color-border: var(--zinc-200);
  --color-border-dark: var(--zinc-400);
  --color-selected: var(--blue-100);
  --color-selected-dark: var(--blue-300);
  --color-highlight: var(--yellow-200);

  /* Accent colors */
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-800);
  --color-primary-light: var(--blue-200);
  --color-secondary: var(--zinc-100);
  --color-secondary-dark: var(--zinc-400);
  --color-negative: var(--red-800);
  --color-negative-light: var(--red-200);
  --color-positive: var(--green-600);
  --color-positive-light: var(--green-200);
  --color-info: var(--sky-300);
  --color-info-light: var(--sky-100);
  --color-info-link: var(--sky-200);
  --color-warning: var(--yellow-600);
  --color-warning-light: var(--yellow-300);
  --color-warning-dark: var(--yellow-800);

  /* SVG color values */
  --color-filter-text: invert(0);
  --color-filter-text-reversed: invert(1);
  --color-filter-negative: invert(22%) sepia(85%) saturate(1790%) hue-rotate(339deg) brightness(105%) contrast(108%);
  --color-filter-positive: invert(44%) sepia(89%) saturate(409%) hue-rotate(89deg) brightness(94%) contrast(97%);

  --headline-font-size: 7rem;

  @media (prefers-color-scheme: dark) {
    /* Abstractions */
    /* --color-bg: var(--zinc-700);
    --color-text: white;
    --color-text-reversed: black;
    --color-text-subtle: var(--zinc-400);
    --color-link: var(--blue-400);
    --color-border-light: var(--zinc-900);
    --color-border: var(--zinc-800);
    --color-border-dark: var(--zinc-600);
    --color-selected: var(--blue-950);
    --color-selected-dark: var(--blue-800);
    --color-highlight: var(--yellow-900); */

    /* Accent colors */
    /* --color-primary: var(--zinc-50);
    --color-secondary: var(--zinc-800);
    --color-negative: var(--red-900);
    --color-positive: var(--green-900); */

    /* SVG color values */
    /* --color-filter-text: invert(1);
    --color-filter-text-reversed: invert(0);
    --color-filter-negative: invert(15%) sepia(65%) saturate(2067%) hue-rotate(339deg) brightness(102%) contrast(97%);
    --color-filter-positive: invert(23%) sepia(62%) saturate(554%) hue-rotate(91deg) brightness(93%) contrast(91%); */
  }
}

@font-face {
  font-family: 'BeVietnam';
  src: url("/assets/BeVietnam-57854ce1.woff2") format('woff2');
  font-display: swap;
}

* {
  border-color: var(--color-border) !important;
  scrollbar-color: #C1C1C1 transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
}

svg.icon {
  width: 21px;
  height: 21px;
}

::placeholder {
  opacity: 0.4 !important;
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
}

.primary {
  color: var(--color-primary) !important;
}

.secondary {
  color: var(--color-secondary) !important;

  &.dark {
    color: var(--color-secondary-dark) !important;
  }
}

.success,
.positive {
  color: var(--color-positive) !important;
}

.danger,
.error,
.negative {
  color: var(--color-negative) !important;
}

.info { color: var(--color-info) !important; }
a.info { color: var(--color-info-link) !important; }

.warning { color: var(--color-warning) !important; }

.white { color: white; }

.bg--primary {
  background-color: var(--color-primary) !important;

  &.light {
    background-color: var(--color-primary-light) !important;
  }
}

.bg--secondary {
  background-color: var(--color-bg-secondary) !important;

  &.light {
    background-color: var(--color-bg-secondary-light) !important;
  }

  &.dark {
    background-color: var(--color-bg-secondary-dark) !important;
  }
}

.bg--success,
.bg--positive {
  background-color: var(--color-positive) !important;

  &.light {
    background-color: var(--color-positive-light) !important;
  }
}

.bg--danger,
.bg--error,
.bg--negative {
  background-color: var(--color-negative) !important;

  &.light {
    background-color: var(--color-negative-light) !important;
  }
}

.bg--info {
  background-color: var(--color-info) !important;

  &.light {
    background-color: var(--color-info-light) !important;
  }
}

.bg--warning {
  background-color: var(--color-warning) !important;

  &.light {
    background-color: var(--color-warning-light) !important;
  }

  &.dark {
    background-color: var(--color-warning-dark) !important;
  }
}

.bg--light {
  background-color: var(--color-bg-secondary-light) !important;
}

.apps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  width: 150px;
}

.apps .apps-icon-box {
  width: 52px;
  height: 52px;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border-radius: 50%;
}

.back-to-top {
  display: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 26px;
  color: #fff;
  position: fixed;
  border-radius: 50%;
  bottom: 20px;
  right: 12px;
  background-color: #0d6efd;
  z-index: 5;
}

.back-to-top:hover {
  color: #fff;
  background-color: #000;
  transition: all 0.5s;
}

.dropdown-toggle-nocaret:after {
  display: none;
}

.icon-box {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
  border: 1px solid #c7c8cb;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.parenthesis:before {
  content: '(';
}

.parenthesis:after {
  content: ')';
}

.align-center { align-items: center }

.align-start { align-items: flex-start }

.align-end { align-items: flex-end }

.align-top { align-items: flex-start }

.card {
  border: 0;
  margin-bottom: 1.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
  background-color: rgb(255, 255, 255);
}

.dropdown-menu {
  border: 0px solid rgba(255, 255, 255, 0);
  border-radius: 10px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.h-0 { height: 0; }

.hidden { visibility: hidden; }

.justify-between { justify-content: space-between; }

.justify-end { justify-content: flex-end; }