/* -------------------------------------------------------------------------- */
/*                                  Couleurs                                  */
/* -------------------------------------------------------------------------- */
:root {
  --bleuCristalens: #1a237e;
  --cyanCristalens: #00bcd4;
  --tabCyan: #e0ffff;
}

/* -------------------------------------------------------------------------- */
/*                                    Font                                    */
/* -------------------------------------------------------------------------- */
/* @font-face {
  font-family: "material_iconsregular";
  src: url(".assets/fonts/material-icons/materialicons-regular-webfont.woff2") format("woff2"),
    url("./assets/fonts/material-icons/materialicons-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
} */

/* .material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr; */

/* Support for all WebKit browsers. */
/* -webkit-font-smoothing: antialiased; */
/* Support for Safari and Chrome. */
/* text-rendering: optimizeLegibility; */

/* Support for Firefox. */
/* -moz-osx-font-smoothing: grayscale; */

/* Support for IE.
  font-feature-settings: "liga";
} */

/* -------------------------------------------------------------------------- */
html,
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  counter-reset: section; /* On initialise le compteur à 0 */
}

body {
  padding-right: 0 !important;
}

main {
  min-height: 100%;
}

.half {
  width: 50%;
}

.cardAdmin {
  height: 300px;
  width: 300px;
}

.bleuCristalens {
  background-color: var(--bleuCristalens);
}

.cyanCristalens {
  background-color: var(--cyanCristalens);
}

.bleuCiel {
  background-color: var(--bleuCiel);
}

/* -------------------- Bg des tr pour les tabs bootstrap -------------------- */
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: var(--tabCyan);
}

.btn-cyan {
  color: #fff;
  background-color: var(--cyanCristalens);
  border-color: var(--cyanCristalens);
}

.toast {
  pointer-events: none;
}

/* ------------------------ input nombre sans flèche ------------------------ */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* -------------------------------------------------------------------------- */
/*                               Page Connexion                               */
/* -------------------------------------------------------------------------- */
.login-text {
  font-size: 2em;
  min-height: 70px;
  text-align: center;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.login-button {
  min-width: 250px;
}

#chgt-langage {
  position: fixed;
  top: 105px;
  right: 2px;
  z-index: 50000;
}

#bodyConnexion {
  background-repeat: no-repeat;
  background-size: cover;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                               Ajout question                               */
/* -------------------------------------------------------------------------- */
.numberType {
  display: none;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                Questionnaire                               */
/* -------------------------------------------------------------------------- */
input:focus:invalid {
  box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.35);
}

input:focus:valid {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.35);
}

.questionnaireAccordion input,
.questionnaireAccordion textarea {
  min-width: 100px !important;
}

/* span[data-translate-type="question"] {
  background-color: #1a237e;
  max-width: 60%;
  min-width: 60%;
} */

/* --------------------------- Button up and down --------------------------- */
#button-up {
  position: fixed;
  bottom: 8%;
  right: 3%;
  z-index: 9999;
}
#button-down {
  position: fixed;
  bottom: 1%;
  right: 3%;
  z-index: 9999;
}
.btn-circle {
  width: 50px;
  height: 50px;
  padding: 6px 0px;
  border-radius: 50px;
  text-align: center;
}
/* -------------------------------------------------------------------------- */
/* ---------------------- formulaire device deficiency ---------------------- */

#div-dd div.form-group::before,
#div-dd legend::before {
  counter-increment: section; /* On incrémente le compteur section */
  content: "" counter(section) " : "; /* On affiche le compteur */
  font-weight: bold;
}

/* -------------------------------------------------------------------------- */
/*                                   Tablet                                   */
/* -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .w-md-100 {
    width: 100% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-25 {
    width: 25% !important;
  }
  .h-md-100 {
    height: 100% !important;
  }
  .h-md-75 {
    height: 75% !important;
  }
  .h-md-50 {
    height: 50% !important;
  }
  .h-md-25 {
    height: 25% !important;
  }
}

/* -------------------------------------------------------------------------- */
/* ---------------------------------- CANVA --------------------------------- */
.canvas {
  /* border: 1px solid black; */
  display: block;
  margin: auto;
  background-color: #fff;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✍️</text></svg>") 16 0,
    auto;
}

.hover {
  background: beige;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12NgYGAAAAAEAAEnNCcKAAAAAElFTkSuQmCC");
  background-repeat: repeat-y;
  background-position: 50%;
}