@use "@angular/material" as mat;

@include mat.core();

$my-app-primary: mat.m2-define-palette(mat.$m2-orange-palette);
$my-app-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
$my-app-warn: mat.m2-define-palette(mat.$m2-red-palette);

$my-app-theme: mat.m2-define-light-theme((color: (primary: $my-app-primary,
        accent: $my-app-accent,
        warn: $my-app-warn,
      ),
    ));

@include mat.all-component-themes($my-app-theme);


html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.AppLoading {
  margin-top: -10px;
  margin-left: -10px;
  opacity: 0;
  transition: opacity .8s ease-in-out;
  position: fixed;
  height: 105%;
  width: 105%;
  z-index: -1;
  background-color: lightgrey;
  background-image: url('./assets/loader.gif');
  background-repeat: no-repeat;
  background-position: center;
}

/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
app-root:empty+.AppLoading {
  opacity: 1;
  z-index: 100;
}

:root {
  --avatar-size: 30px;
}

.avatar {
  background-color: #ccc;
  border-radius: 50%;
  height: var(--avatar-size);
  text-align: center;
  width: var(--avatar-size);
  vertical-align: middle;
  margin-right: 10px;
}

.form-card {
  min-width: 120px;
  margin: 20px auto;
}

.full-width {
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
}

.col {
  flex: 1;
  margin-right: 20px;
}

.col:last-child {
  margin-right: 0;
}

input[disabled] {
  color: black;
  -webkit-text-fill-color: black;
}