/* This file contains the minimal styling to render a nice loading screen
 * (before Angular is loaded).
 */

/* COLOR THEME */
:root {
  --color-theme-1-lightest: #f1f4f9;
  --color-theme-2-lighter: #c7d0d8;
  --color-theme-3-light: #99a6b5;
  --color-theme-4-lightish: #5e6670;
  --color-theme-5-darkish: #414954;
  --color-theme-6-dark: #39414d;
  --color-theme-7-darker: #2d343d;
  --color-theme-8-darkest: #020e1d;
    --color-theme-9-orange: #FF8D00;
    --color-theme-10-light: #e8ecf2;

  --color-accent-1-dark-purple: #63255c;
  --color-accent-2-light-blue: #4fc3f7;
  --color-accent-3-dark-blue: #1683fb;
  --color-accent-4-washed-yellow: #fef0b5;
  --color-accent-5-orange: #ffc107;
  --color-accent-6-washed-red: #ff5a5a;
  --color-accent-7-washed-green: #009082;
  --color-accent-8-light-purple: #875fd0;
  --color-accent-9-dark-violet:#29213C;
  --color-accent-10-dark-red: #8D3333;
  --color-accent-11-dark-yellow: #F5A623;
  --color-accent-12-light-yellow: #F9CB7D;
  --color-accent-13-dark-grey: #8F8766;

  --color-trend-axis-label-background: rgba(255, 255, 255, 0.6);

  --color-trendline-1: #136fd5;
  --color-trendline-2: #34F285;
  --color-trendline-3: #FC0366;
  --color-trendline-6: #EF7809;
  --color-trendline-7: #FC0366;
  --color-trendline-8: #702F9E;

  --color-trendline-motor-current: var(--color-trendline-2);
  --color-trendline-motor-frequency: var(--color-theme-1-lightest);
  --color-trendline-motor-temp: var(--color-trendline-8);
  --color-trendline-intake-temp: var(--color-trendline-3);
  --color-trendline-intake-pressure: var(--color-accent-2-light-blue);
  --color-trendline-discharge-pressure: var(--color-theme-2-lighter);
  --color-trendline-tubing-temperature :var(--color-trendline-6);
  --color-trendline-tubing-pressure: var(--color-trendline-1);
  --color-trendline-casing-pressure : var(--color-trendline-7);
  --color-trendline-surface-choke-position :var(--color-accent-5-orange);

  --color-grid-underline-0: #99a6b5aa;
  --color-grid-underline-1: #99a6b599;
  --color-grid-underline-2: #99a6b588;
  --color-grid-underline-3: #99a6b577;
  --color-grid-underline-4: #99a6b566;
  --color-grid-underline-5: #99a6b555;
  --color-grid-underline-6: #99a6b544;
  --color-grid-underline-7: #99a6b533;
  --color-grid-underline-8: #99a6b522;
  --color-grid-underline-9: #99a6b511;

  --color-primary-1-violet: #8F00E3;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

/* STYLES FOR TEMPORARY APP LOADING SCREEN */
.app-loading {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #2d343d, #414954);
  color: var(--color-theme-3-light);
  display: flex;
  justify-content: center;
  align-content: center;
  --grid-gap: 64px;
}

.app-loading .loading-indicator-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 32px;
  margin: auto;
  margin-left: var(--grid-gap);
}

.app-loading .loading-indicator-brand span:first-letter {
  font-weight: bold;
  font-size: 1.1em;
}

.app-loading .loading-indicator-container {
  width: auto;
  height: auto;
  margin-right: 0;
}

/* REUSABLE LOADING INDICATOR SVG */
.loading-indicator-symbol {
  height: 0;
  width: 0;
  position: absolute;

  --animation-duration: 2s;
  --animation-delay-step-size: calc(var(--animation-duration) / 10);
}

.loading-indicator-container {
  display: flex;
  width: 100%;
  height: 100%;
  margin: auto;

  --animation-duration: 2s;
  --animation-delay-step-size: calc(var(--animation-duration) / 10);
}

.loading-indicator-container svg {
  margin: auto;
  width: var(--loading-indicator-width, 200px);
  height: var(--loading-indicator-width, 200px);
}

.loading-indicator__row path {
  transform-origin: calc(1px * var(--center-x)) calc(1px * var(--center-y));
  animation-name: loading-indicator__animation;
  animation-duration: var(--animation-duration);
  animation-iteration-count: infinite;
}

.loading-indicator__row-0 path {
  animation-delay: calc(1 * var(--animation-delay-step-size));
}

.loading-indicator__row-1 path {
  animation-delay: calc(2 * var(--animation-delay-step-size));
}

.loading-indicator__row-2 path {
  animation-delay: calc(3 * var(--animation-delay-step-size));
}

.loading-indicator__row-3 path {
  animation-delay: calc(4 * var(--animation-delay-step-size));
}

@keyframes loading-indicator__animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.01);
  }
  100% {
    transform: scale(1);
  }
}