:root {
  --primary-color: 0, 159, 227, 1;
  --primary-color-light: 98, 208, 255, 1;
  --primary-color-dark: 0, 113, 177, 1;
  --color-error: 228, 0, 57, 1;
  --color-success: 96, 211, 148, 1;
  --background-main: 255, 255, 255, 0.85;

  /* Toolbar */
  --toolbar-color: 0, 159, 227, 1;

  /* Navigation */
  --navbar-top-background: 255, 255, 255, 1;
  --navbar-bottom-background: 255, 255, 255, 1;
  --navbar-top-icon-color: 0, 159, 227, 1;
  --navbar-bottom-icon-color: 0, 159, 227, 1;
}

html.dark-mode {
  --background-main: 21, 21, 21;
  --background-content: 42, 42, 42;
  --navbar-top-background: 42, 42, 42;
  --navbar-bottom-background: 42, 42, 42;
  --navbar-top-icon-color: 82, 191, 233;
  --navbar-bottom-icon-color: 82, 191, 233;
  --font-color: 255, 255, 255;
  --font-color-invert: 21, 21, 21;
  --toolbar-color: 82, 191, 233;
  --color-alpha-grey: 0, 0, 0, 0.21;
  --color-alpha-black: 0, 0, 0, 0.42;
  --title-font-color: 200, 200, 200;
}

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

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

.provide-service-content,
.get-service-content,
.login-content {
  background-color: rgba(var(--background-content));
  border-radius: var(--default-radius-large, 18px);
}

.get-service-state .get-service-content {
  flex: 0;
}

.dashboard-state .dashboard-state-title .dashboard-account .user-info .user-info-name,
.dashboard-state .dashboard-state-title .dashboard-account .user-info .user-info-email {
  color: var(--font-color-invert, #FFFFFF);
}

.dashboard-state .dashboard-state-policy-wrapper,
.dashboard-state .dashboard-state-policy-wrapper md-icon,
.get-service-state .get-service-state-policy-wrapper,
.get-service-state .get-service-state-policy-wrapper md-icon,
.dashboard-state .dashboard-state-policy-wrapper span,
.get-service-state .get-service-state-policy-wrapper span {
  color: rgba(var(--title-font-color));
  text-shadow: 0 0 .5px rgba(var(--font-color));
}

.shell .shell-content-wrapper {
  background-color: rgba(var(--background-main));
}

.get-service-state .get-service-content,
.provide-service-state .provide-service-content {
  background-color: none;
}

.input-field-directive {
  background-color: none;
}

.input-field-directive .input-wrapper label {
  top: -15pt;
  background-color: none;
  color:rgba(var(--title-font-color));

}

.input-field-directive .input-wrapper input {
  border: 2px solid rgba(var(--title-font-color));
}

.state .content {
  background-color: rgba(var(--background-main))!important;
  box-shadow: var(--default-box-shadow);
}

.feature-tile {
  border: 2px solid transparent;
}
  
.feature-tile:not([disabled]):focus, .feature-tile:not([disabled]):hover {
  border: 2px solid rgba(var(--vuzix-focus-color));
}

.speedtest-dialog .vuzix-quality-button:hover, .speedtest-dialog .vuzix-quality-button:focus {
  color:white;
}

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

.get-service-information-text-footer {
  text-align: center;
}