:root {
  --primary-color: 0, 32, 91, 1;
  --primary-color-light: 60, 71, 137, 1;
  --primary-color-dark: 0, 0, 49, 1;
  --color-success: 132, 189, 148, 1;
  --color-info: 225, 224, 0, 1;
  --color-warn: 254, 80, 0, 1;
  --color-error: 228, 0, 43, 1;
  --background-main: 225, 233, 236, 1;
  /* Toolbar */
  --toolbar-color: 0, 32, 91, 1;
  /* Navigation */
  --navbar-top-background: 0, 32, 91, 1;
  --navbar-bottom-background: 0, 32, 91, 1;
  --navbar-top-icon-color: 255, 255, 255, 1;
  --navbar-bottom-icon-color: 255, 255, 255, 1;

  --aribus-highlight-pantone-3125C: 0, 174, 199, 1;
}

html.dark-mode {
  --background-main: 21, 21, 21, 1;
  --background-content: 42, 42, 42, 1;
  --background-content-accent: 64, 64, 64, 1;
  --navbar-top-background: 42, 42, 42, 1;
  --navbar-bottom-background: 42, 42, 42, 1;
  --navbar-top-icon-color: 0, 32, 91, 1;
  --navbar-bottom-icon-color: 0, 32, 91, 1;
  --font-color: 255, 255, 255, 1;
  --font-color-invert: 0, 0, 0, 1;
  --toolbar-color: 0, 32, 91, 1;
  --color-alpha-grey: 0, 0, 0, 0.21, 1;
  --color-alpha-black: 0, 0, 0, 0.42, 1;
  --title-font-color: 255, 255, 255, 1;
}

html, body {
  background-image: url(../images/app_background.png);
  background-repeat: no-repeat;
  background-position: center center;
}

.shell .shell-toolbar {
  border-bottom: 2px solid rgba(var(--slate));
}

.shell .logo-and-claim-container {
  padding-left: 22px;
}

.chat-directive {
  background-image: url(../images/chat_background_2.png) !important;
}

.dark-mode .chat-directive {
  background-image: url(../images/chat_background_dark.png) !important;
}

.shell .logo-and-claim-container .logo-container {
  justify-content: unset;
}

.shell .logo-and-claim-container .logo-container .logo-app {
  height: 100%;
  max-height: 22px;
  min-height: 22px;
}

.shell .logo-and-claim-container .logo-container .icon-app {
  width: auto;
  max-width: 210px;
  height: 100%;
  max-height: 22px;
  min-height: 22px;
}

.shell .logo-and-claim-container .claim-container {
  padding-left: 22px;
  justify-content: flex-start;
}

.shell .logo-and-claim-container .claim-container img {
  margin: 0;
  height: 12px;
}

.shell-side-navigation:not(.dark-mode) .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user {
  color: rgba(var(--navbar-top-icon-color))
}

.bottom-navigation-button.is-active md-icon, .bottom-navigation-button:hover md-icon {
  color: rgba(var(--aribus-highlight-pantone-3125C));
}

.chat-directive {
  background-image: url(../images/chat_background_2.png) !important;
}

.state .content {
  box-shadow: var(--default-box-shadow);
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-login {
  color: rgba(var(--navbar-top-icon-color));
}

@media (max-width: 450px) {
  .shell .logo-and-claim-container .claim-container {
    display: none;
  }
}

.user-icon-directive {
  border: 2px solid rgba(var(--navbar-top-icon-color));
}

.user-icon-directive .user-initials, .shell .shell-toolbar .side-navigation-trigger-button:hover md-icon[md-svg-icon="navigation:menu"] {
  color: rgba(var(--navbar-top-icon-color));
}

.bottom-navigation-button.is-active, .bottom-navigation-button:hover {
  color: rgba(var(--navbar-bottom-icon-color));
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user .shell-side-navigation-user-settings .shell-side-navigation-user-availability,
.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user .shell-side-navigation-user-settings .shell-side-navigation-user-availability:hover, .shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user .shell-side-navigation-user-settings .shell-side-navigation-user-name {
  color: rgba(var(--font-color-invert));
}

.user-icon-directive .user-image img, .user-icon-directive .user-image md-icon {
  color: rgba(var(--font-color-invert)) !important;
}

.bottom-info-bar-directive .bottom-info-bar-directive-content button:not(.md-icon-button) span, .bottom-info-bar-directive .bottom-info-bar-directive-content button md-icon {
  color: rgba(var(--font-color-invert)) !important;
}