@import url('./assets/fonts/Open-Sans.css');

/*
 * Fichier de styles Panorama
 * Contenant les styles qui pourront être
 * personnalisés par l'intégrateur
 */

/*
 * Ces styles sont globaux et s'applique
 * même au contenu des composants Angular
 */
.errorMessage {
    color: red;
}
.warningMessage {
    color: darkorange;
}
.waiting {
  background-color: var(--background-color) !important;
  color: var(--color) !important;
}

/**
 * Élément racine de la page
 */
#root {
  --background-color: white;
  --color: black;
  --font-family: Open Sans,sans-serif;
  --font-size: 14px;
  --form-title-font-size: calc(2 * var(--font-size));
  --header-padding: 0.5em;
  --header-height: 1.4em;
  --header-total-height: calc(2*var(--header-padding) + var(--header-height));

  background-color:var(--background-color);
  color:var(--color);
}

/**
 * En-tête
 */
#header {
  /*display:none;*/
  font-family: var(--font-family);
  font-size: var(--font-size);
  padding-top: var(--header-padding);
  padding-bottom: var(--header-padding);
  height: var(--header-height);
  background-image: linear-gradient(270deg,#4692ce,#254e97);
  color: white;
}

/**
 * Ligne séparatrice entre
 * le bandeau supérieur et
 * le contenu de la page
 */
#separatorLine {
  /*display: none;*/
}

/**
 * Contenu de la page
 */
#mainContent {
}

/**
 * Information sur la licence
 */
#license {
  /*display: none;*/
  font-family: var(--font-family);
  font-size: var(--font-size);
  background-color: #f6f6f6;
  text-align: center;
}

/**
 * Logo 
 */
#header #logo {
  position: absolute;
  top: 0;
  height: var(--header-total-height);
  width: var(--header-total-height);
  background-image: url('./assets/icons/icon-72x72.png');/*url(data:image/png;base64,...); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-color: var(--background-color);
}
#header #logo::after {
  position: absolute;
  top: 0;
  left: var(--header-total-height);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: var(--header-total-height) calc(0.5*var(--header-total-height)) 0 0;
  border-color: var(--background-color) transparent transparent;
  content: "";
}

/**
 * Bandeau supérieur sans le logo
 */
#header #topBanner {
  padding-left: calc(1.5*var(--header-total-height));
  padding-right: var(--header-padding);
}
#header #topBanner a {
  color: white;
  text-decoration: none;
}
#header #topBanner a:hover {
  color: white;
  text-decoration: underline;
}
/**
 * Nom de l’utilisateur
 */
#header #topBanner #userId  {
}
#header #topBanner #userId:nth-last-child(1) a::after {
  padding-left: 0.9em;
  content: "\2228";
  display: inline-block;
}
#header #topBanner #userId:nth-last-child(2) a::after {
  padding-left: 0.9em;
  content: "\2227";
  display: inline-block;
}
/**
 * Menu accessible par le nom de l’utilisateur
 */
#header #topBanner #menu {
  background-color: #f6f6f6;
  top: var(--header-total-height);
}
#header #topBanner #menu::after {
  content: "";
  position: absolute;
  top: calc(-1.0*var(--header-padding));
  left: 0;
  width: 100%;
  height: var(--header-padding);
}
#header #topBanner #menu a {
  color: black;
  text-decoration: none;
}
#header #topBanner #menu a:hover {
  color: black;
  text-decoration: underline;
}
/**
 * Entrée "Tableau de bord d’accueil" du menu
 */
#header #topBanner #menu #defaultDashboardMenuItem {
}
/**
 * Entrée "Déconnexion" du menu
 */
#header #topBanner #menu #disconnectMenuItem {
}
/**
 * Entrée "Changement de mot de passe" du menu
 */
#header #topBanner #menu #changePasswordMenuItem {
}
/**
 * Entrée "Tableaux de bord à la demande" du menu
 */
#header #topBanner #menu #ondemandDashboardMenuItem {
}
/**
 * Entrée "Paramétrage des utilisateurs" du menu
 */
#header #topBanner #menu #manageUsersMenuItem {
}

/*
 * Formulaire d'authentification
 */
#authentication {
  min-width: max(50%, 20em);
}
#authentication #logo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 5em;
  width: 100%;
  padding: 3em 0 3em;
}
#authentication #logo #image {
  flex: 0 0 auto;
  order: 1;
  align-self: center;
  height: 100%;
  background: center / contain no-repeat;
  /*
  margin-right: 0.5em;
  width: 5em;
  background-image: url('./assets/icons/icon-72x72.png');
  */
  width: calc(100% - 2em);
  margin: 0 1em 0;
  background-image: url('./assets/logos/logo-900x175.png')/*url(data:image/png;base64,...)*/;
}
#authentication #logo #text {
  flex: 0 0 auto;
  order: 2;
  align-self: center;
  /*
  margin-left: 0.5em;
  */
  display: none;
}
/* #authentication #logo #text::after {
  font-family: var(--font-family);
  font-size: 5em;
  content: 'Panorama';
} */
#authentication #form {
  width: min(50%, 20em);
  margin: auto;
  padding: 1em;
  font-family: var(--font-family);
  font-size: var(--font-size);
  border: thin solid gray;
  box-shadow: 0.5rem 0.5rem 0.5rem lightgray;
}
#authentication #form #title {
  font-size: var(--form-title-font-size);
  /* overflow: hidden;
  text-indent: -9999px; */
}
/*#authentication #form #title::before {
  display: inline-block;
  float: left;
  text-indent: 0;
  padding: 0;
  content: 'Welcome!';
}*/
#authentication #form #userLabel {
  /*overflow: hidden;
  text-indent: -9999px;*/
}
/*#authentication #form #userLabel > span {
  display: inline-block;
  float: left;
  text-indent: 0;
  padding: 0;
}
#authentication #form #userLabel::before {
  display: inline-block;
  float: left;
  text-indent: 0;
  padding: 0;
  content: 'Id : ';
}*/

#authentication #form #userInput {
}
/*#authentication #form #userInput::placeholder {
  color: transparent;
}*/

#authentication #form #passwordLabel {
  /*overflow: hidden;
  text-indent: -9999px;*/
}
/*#authentication #form #passwordLabel > span {
  display: inline-block;
  float: left;
  text-indent: 0;
  padding: 0;
}
#authentication #form #passwordLabel > span:first-of-type:before {
  display: inline-block;
  padding-left: 0.5ch;
  content: ' (';
}
#authentication #form #passwordLabel > span:first-of-type:after {
  display: inline-block;
  padding-left: 0;
  text-decoration: none;
  content: ') : ';
}
#authentication #form #passwordLabel::before {
  display: inline-block;
  float: left;
  text-indent: 0;
  padding: 0;
  content: 'Pin ';
}*/
#authentication #form #passwordInput {
}
/*#authentication #form #passwordInput::placeholder {
  color: transparent;
}*/
#authentication #form #stayLoggedLabel {
}
#authentication #form #stayLoggedInput {
}
#authentication #form #languageLabel {
}
#authentication #form #languageInput {
}
#authentication #form #connectButton {
}
#authentication #form #errorLabel {
}
#authentication #form #reasonLabel {
}

/*
 * Page de sélection du contexte d'IHM
 */
#contextSelector {
  min-width: max(50%, 20em);
  height: 100%;
}
#contextSelector #form {
  width: min(50%, 20em);
  margin: auto;
  padding: 1em;
  font-family: var(--font-family);
  font-size: var(--font-size);
  border: thin solid gray;
  box-shadow: 0.5rem 0.5rem 0.5rem lightgray;
  position: relative;
  top: 25%;
  transform: translateY(-25%);
}

/*
 * Page de changement de mot de passe
 */
#changePassword {
  min-width: max(50%, 20em);
  height: 100%;
}
#changePassword #form {
  width: min(50%, 40em);
}
.userparams {
  width: 80%;
  height: 80%;
}
#changePassword #form,
.userparams {
  margin: auto;
  padding: 1em;
  font-family: var(--font-family);
  font-size: var(--font-size);
  border: thin solid gray;
  box-shadow: 0.5rem 0.5rem 0.5rem lightgray;
  position: relative;
  top: 25%;
  transform: translateY(-25%);
}
#changePassword #form #title,
#userparams #form #title{
  font-size: var(--form-title-font-size);
}
#changePassword #form #title {
}
#changePassword #userLabel {
}
#changePassword #userInput {
}
#changePassword #currentPasswordLabel {
}
#changePassword #currentPasswordInput {
}
#changePassword #newPasswordLabel {
}
#changePassword #newPasswordInput {
}
#changePassword #confirmPasswordLabel {
}
#changePassword #confirmPasswordInput {
}
#changePassword #okButton {
}
#changePassword #cancelButton {
}
#changePassword #errorLabel {
}

/**
 * Pages de vues ou vue principale
 */
#dashboard {
}