:root {
  --app-color-accent: #1BADFF;
  --app-color-darken: #1a2d60;
  --app-color-highlight: #496395;
  --app-color-primary: #233c77;
  --app-content-height: calc(100% - var(--app-main-bar-height));
  --app-content-padding: 16px;
  --app-content-width: calc(100% - var(--app-side-bar-width));
  --app-font-family: "DM Sans", sans-serif;
  --app-font: 400 14px/20px var(--app-font-family);
  --app-main-bar-height: 56px;
  --app-nav-bg: #081328;
  --app-nav-highlight-active: rgba(70, 70, 43, 0.06);
  --app-nav-highlight-hover: rgba(255, 255, 255, 0.12);
  --app-location-default: rgba(255, 255, 255, 0.12);
  --app-location-hover: rgba(255, 255, 255, 0.24);
  --app-location-active: rgba(255, 255, 255, 0.24);
  --app-side-bar-width: 56px;
  --app-side-bar-drawer-bg: #fff2;
  --app-side-bar-drawer-title-fg: rgba(241, 242, 255, 0.5);
  --app-settings-menu-width: 256px;
}

html,
html body {
  font-family: var(--app-font-family);
  letter-spacing: -0.02em;
}

body.eijsync {
  --app-color-accent: #FF7D25;
}

#vue-container {
  height: calc(100% - var(--app-main-bar-height));
  margin: var(--app-main-bar-height) 0 0 var(--app-side-bar-width);
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  width: calc(100% - var(--app-side-bar-width));
}

#vue-app-next,
#vue-navigation {
  display: contents;
}

body.embedded {
  background-color: white;
}

body.embedded #vue-container,
.twi #vue-container {
  position: static;
  height: 100%;
  margin: 0;
  min-height: 100%;
  overflow: visible;
  width: 100%;
}


.app-main-bar,
.app-side-bar,
.app-corner {
    color: var(--fg-invert, #fff);
    position: fixed;
    z-index: 900;
}

.app-main-bar,
.app-side-bar,
.app-side-bar-drawer,
.app-corner {
    background-color: var(--app-nav-bg);
}

.app-main-bar--acceptance,
.app-side-bar--acceptance,
.app-side-bar-drawer--acceptance,
.app-corner--acceptance {
    --app-nav-bg: #311552;
}

.app-main-bar--test,
.app-side-bar--test,
.app-side-bar-drawer--test,
.app-corner--test {
    --app-nav-bg: #4A1C07;
}

.app-main-bar {
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-main-bar-height);

    display: flex;
    padding: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
}

.app-side-bar {
    bottom: 0;
    left: 0;
    padding: 0;
    top: var(--app-main-bar-height);
    width: var(--app-side-bar-width);
}

.app-corner {
    top: var(--app-main-bar-height);
    left: var(--app-side-bar-width);
    width: 8px;
    height: 8px;
    clip-path: path('M 8 0 A 8 8 0 0 0 0 8 L 0 0 Z');
    user-select: none;
    pointer-events: none;
    touch-action: none;
}

.app-main-bar,
.app-main-bar__logo,
.app-main-bar__leading,
.app-main-bar__trailing {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.app-main-bar__leading {
    gap: var(--spacing-normal, 16px);
    justify-content: start;
    margin-right: auto;
    min-width: 0;
}

.app-main-bar__tabs {
    display: flex;
    padding: var(--spacing-small, 8px) var(--spacing-medium, 12px) var(--spacing-small, 8px) 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    gap: var(--spacing-normal, 16px);
    flex: 1 0 0;
    margin: 0;
    padding: 0;
}

.app-main-bar__trailing {
    padding: 0 var(--spacing-medium, 12px);
    gap: var(--spacing-xsmall, 4px);
    justify-content: end;
}

.app-main-bar__skeleton,
.app-side-bar__skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) -54.78%, rgba(255, 255, 255, 0.40) -27.39%, rgba(255, 255, 255, 0.00) 0%), linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), var(--borderColor-default, rgba(27, 27, 14, 0.14));
    border-radius: var(--radii-large, 8px);
    flex: none;
    margin: 0;
    padding: 0;
    height: 32px;
    width: 32px;
}

.app-side-bar__skeleton {
    margin: var(--spacing-xsmall, 4px) auto;
}

.app-main-bar__skeleton--logo {
   margin: calc((var(--app-main-bar-height) - 32px) / 2);
}

.app-main-bar__skeleton--title {
    height: 20px;
    width: 100px;
}

.app-main-bar__skeleton--location {
    height: 32px;
    width: 134px;
}

.app-main-bar__skeleton--tab {
    flex: 0 1 auto;
    height: 8px;
    width: 60px;
    margin: 0;
}

.app-main-bar__skeleton--help {
    margin-right: var(--spacing-normal, 16px);
    width: 110px;
}

.app-main-bar__skeleton--user {
    width: 60px;
}

.app-side-bar__items {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: start;
    left: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}