/*  ##### Définition des valeurs générales ##### */
*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  --red-color: #cd1414;
  --grey-menu: #1c1c1c;
  --white-content-tab-content: #fff;
  --orange-color: #ff9900;
  --blue-color: #000066;
  --grey-input-border: #cfcfcf;
  --grey-table-header: #7b7878;

  /* The intrinsic width of the underline stroke (in pixels).*/
  --underline-intrinsic-width: 8;

  /* We need to know the width of the cap images so that we
    * can position everything on the x axis accordingly. */
  --underline-cap-width: 4px;

  /* The padding to add to the x axis. By default, the caps would be
    * aligned with the beginning and end of the line. */
  --underline-padding-x: 0.12em;
}

/* Elements globaux */
html {
  scroll-behavior: smooth;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Calibri;
  font-size: 12px;
  background-color: #edf1f2;
}

h1 {
  color: var(--red-color);
  font-size: 36px;
  text-align: center;
}

h2 {
  font-size: 20px;
}

a {
  display: inline-block;
  color: #0015d7;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

li {
  list-style-type: none;
}

/* #### Tableaux ####*/
table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  background-color: #ffffff;
}
th a {
  color: #fff;
}
a.structure-personne {
  text-decoration: underline;
  font-weight: bold;
}
a.structure-personne:hover {
  text-decoration: none;
}
th,
td {
  border: 1px solid #a9a9a9;
  text-align: center;
  padding: 10px;
}

tdnonaffiche {
	display: none;
}

th {
  color: #fff;
  background-color: var(--grey-table-header);
  font-weight: 800;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #edf1f2;
}
.table-heading-type {
  font-style: italic;
  display: block;
}
/* ** Datatables lib style ** */

/* Cacher le champ de recherche (on ne peut pas le disable sinon les filtres de recherche ne marchent pas)*/
.dt-search{
  display:none !important;
}

label[for="dt-search-0"]  {
  width : auto;
}
div.dt-container div.dt-layout-row {
  margin : 0.25em 0 !important;
}

#filter-container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Espacement entre les labels */
}

.label-container, .options-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.label-options-container {
  display:flex;
}

.label-container {
  justify-content: space-around;
}

.search-label {
  display: flex;
  align-items: center; /* Aligner le texte du label et le select verticalement */
  justify-content: space-between;
  width: auto;
}

#reset-container {
  display:none;
  margin : .125rem 0 .9375rem 0;
}
#loading_sheep {
  margin : 15px 0;
}
/* ** Consulter projet ** */

.personne-infos {
  display: block; /* Masquer par défaut */
}

.personne-infos.active {
  display: block; /* Afficher la div active */
}

/* Consulter personne: Tableaux historique des projets */
.linked-projects-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.linked-projects-container {
  display: flex;
  padding: 0 21px;
}

.sticky-array {
  max-height: 400px;
  overflow-y: auto;
  margin-right: 13px;
}
/* Permet de garder le head u tableau en position fixée */
.sticky-array > table > thead:first-child {
  position: sticky;
  top: 0;
  z-index: 1;
}
.sticky-array.anim {
  max-height: 500px;
}
.arrays-container {
  padding: 15px;
}
/*Structure : personnes liées a cette structure*/
.personnes_liees {
  margin-left: 8rem;
}
.personnes_liees ul {
  list-style: none;
  padding: 0;
}

.personnes_liees li.person-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}
/* Affichage des personnes liées au projet */
.personnes_liees_au_projet {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}
.personnes_liees_au_projet > .personne_liee_block:first-child {
  background-color: #ffddab;
  border: 1px solid black;
  font-weight: bold;
}
/*Style de l'affichage de personnes liées*/
.personne_liee_block {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  padding: 5px 10px;
  width: auto;
}
/* Nom de la personne liée*/
.linked_person__to_project {
  cursor: pointer;
}
/* Croix pour enlever la personne du projet*/
.icon_remove_person {
  cursor: pointer;
}
/* #### Elements de formulaire ### */
form {
  width: 97%;
}

.form-input-container label {
  display: inline-block;
  width: 180px;
  text-align: right;
  font-size: medium;
  padding-top: 3px;
  margin-right: 15px;
}

label.inlabel {
  display: inline;
  color: #000;
  margin-bottom: 0;
  padding:0;
  font-size:14px;
}

.label-textarea {
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

input,
textarea,
select {
  border: 1px solid var(--grey-input-border);
  padding: 7px;
  border-radius: 5px;
}
input[type="date"] {
  width: 120px;
}
/* Styles lorsque les éléments input sont en focus */
input:focus,
textarea:focus,
select:focus {
  border: 1px solid #8a8a8a;
  outline: none;
}

textarea {
  max-width: 1150px;
  max-height: 1000px;
  min-height: 40px;
  min-width: 396px;
}
.input-with-svg-container {
  position: relative;
  display: inline-block;
}
.search_input {
  padding-right: 2.6em; /* Adjust this value based on the width of the SVG */
  box-sizing: border-box;
}

.input-icon {
  position: absolute;
  right: 0.3em; /* Adjust the right value as needed */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* This ensures the SVG doesn't interfere with input focus/clicks */
}

/* Boutons */
/* Classe pour les éléments de type button et input */
.btn-red,
.btn-yellow,
.btn-objet {
  display: inline-flex;
  padding: 6px 8px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  border: none;
}

.btn-red {
  background: var(--red-color);
}

.btn-yellow {
  color: #fff;
  background: var(--orange-color);
}
.btn-yellow:hover {
  cursor: pointer;
  text-decoration: none;
  background: #db8300;
}
.btn-objet {
  color: #fff;
  background-color: var(--blue-color);
}
.btn-objet:hover {
  text-decoration: none;
  background-color: #2b2b85;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
/* Surcharge pour les input avec un btn-red (légèrement différent des button)*/
input.btn-red {
  font-weight: bold;
  color: white;
  cursor: pointer;
  padding: 10px 15px;
}
input.btn-red:hover {
  background-color: rgb(153, 0, 0);
}
/* Conteneur pour le bouton enregistrer (pour pouvoir l'aligner avec les labels)*/
.btn-container {
  display: flex;
}

.btn-container > div:first-child {
  width: 198px;
}
.align-maj-btn-text {
  display: flex;
  align-items: end;
  gap: 14px;
}
.text-maj {
  font-style: italic;
  color: #7b7878;
}
/* Form boutons radio */
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  margin: 0;
  color: currentColor;
  width: 0.2em;
  height: 0.2em;
  border: 0.1em solid currentColor;
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: grid;
  grid-template-rows: 1fr;
  place-content: center;
}

/* Case cochée */
input[type="radio"]::before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 0 0 0 0.4em var(--orange-color);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}
input[type="radio"]:checked {
  border-color: var(--orange-color); /* Changement de la couleur de la bordure lorsqu'il est coché */
}

.align-input-img {
  display: flex;
  align-items: center;
}
/* Div pour mise en forme des champs inputs des formulaire*/
.form-input-container {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 15px 0;
}

.form-radio-container {
  display: flex;
  align-items: center;
}
.form-radio {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 0.8rem;
  line-height: 1.1;
  gap: 0.5em;
}

.form-radio + .form-radio {
  margin-top: 1em;
}

/* ##### WRAPPER de page #####*/
.wrapper {
  min-height: 100vh;
  height:auto;
  display: grid;
  grid-template-columns: 2.5fr repeat(3, 4fr);
  grid-template-rows: 0fr 8fr;
  grid-template-areas:
    "header header header header"
    "nav content content content";
}

img {
  display: inline;
}
img.small {
  max-height: 32px;
  vertical-align: middle;
  margin: 4px;
}

/* ##### HEADER #####
  Logo + Date + Bonjour et deconnexion 
*/
header {
  height: 55px;
  grid-area: header;
  background-color: var(--red-color);
}
header .header-container {
  display: grid;
  align-items: center;
  grid-template-columns: 2.5fr repeat(2, 4fr) 2.5fr;
  grid-template-rows: 1fr;
  grid-template-areas: "logo date date hello";
}

header .logo {
  grid-area: logo;
  justify-self: center;
}

header .date {
  grid-area: date;
  color: #fafafa;
}

header .hello {
  grid-area: hello;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fafafa;
}

/* ##### 
    Menu de navigation à gauche 
#####*/
nav {
  grid-area: nav;
  background-color: var(--grey-menu);
  font-family: Roboto;
  font-style: normal;
  padding-bottom: 15px;
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 1px 4px 10px 4px rgba(0, 0, 0, 0.2);
  /* 
  TODO : le menu reste fixe après le défilement du header et on peut 
  scroll le contenu en défilant dessus 
*/

  /*   
  position:fixed;
  top:75px; */
}

nav a {
  color: #fff;
}
nav a:hover {
  text-decoration: none;
  font-weight: bold;
}

nav .selected {
  border-left: 2px solid var(--Rouge-CD1414, #cd1414);
  background: #292929;
  padding: 5px;
}

/* Toute la liste de listes */
ul.all-lists {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Titres principaux du menu
    Container
*/
nav .logo-title-container {
  display: flex;
  gap: 0.5625rem;
  padding-left: 1.125rem;
  margin-bottom: 1rem;
  height: 35px;
  align-items: center;
  background: #272727;
}
/* Titres principaux du menu
  Texte des titres
*/
nav .titles {
  color: #e8e8e8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
nav .active-link {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  flex-wrap: wrap;
  border-left: 3px solid var(--red-color);
  width: 100%;
  padding: 5px;
  background-color: #272727;
  gap: 5px;
}
li .active {
  padding-left: 5px;
  display: flex;
  align-items: center;
  height: 100%;
}
li .active-link a {
  font-weight: 600;
}
/* Elements de sous menu */
.submenu {
  display: flex;
  gap: 11px;
  flex-direction: column;
  font-size: 13px;
  letter-spacing: 0.8px;
}

.submenu-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.85px;
}

/* Elements de liste particuliers qui contiennent un bouton "Nouveau..."*/
.li-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Boutons rouges du menu */
.submenu .btn-red {
  margin-left: 13px;
}
/* Boutons rouges du menu */
.submenu .btn-red a {
  font-weight: 600;
}
/* Boutons rouges du menu au survol*/
.btn-red:hover {
  cursor: pointer;
  background-color: #a70a0a;
}
/* Pour les liens hors menu */
.btn-link {
  color: #fff;
}
.btn-link:hover {
  text-decoration: none;
}
/* ##### Contenu #####*/
.content {
  grid-area: content;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 15px;
}

.content-wrapper .tab-content {
  width: 100%;
  background: #ffffff;
  margin-bottom: 15px;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 1px 4px 4px 0 rgba(0, 0, 0, 0.24);
}

.content-wrapper .tab-content:not(.active) {
  display: none;
}

.content-wrapper .tab-content.active {
  display: block;
}

/* Page "Liens Utiles" */
.content-wrapper-liens {
  margin-bottom: 15px;
  padding: 15px;
}
.content-wrapper-liens.background {
  margin: 0 15px;
  background: #fff;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 1px 4px 4px 0 rgba(0, 0, 0, 0.24);
}
.liens-content {
  display: flex;
  gap: 6px;
  flex-direction: column;
  margin-top: 12px;
}
/* Bouton Nouveau contact dans cette structure*/

.add_link {
  margin: 15px 0;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.selected-category {
  font-style: italic;
  font-weight: bold !important;
  color: #000; /* Couleur de surbrillance */
  background-color: #ffdeae;
  padding: 2px;
}
.btn-supprimer-lien {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--red-color); /* Change la couleur de tout le contenu du bouton en rouge */
}
/* Wrapper pour le contenu des blocks */
.tab-content-wrapper {
  padding: 18px;
}

.content-nav {
  width: 97%;
}

.tel-logo {
  height: 25px;
  margin-left: 9px;
}

.tete-animateur {
  width: 25px;
  height: 25px;
  margin-left: 9px;
  border-radius: 20%;
}

/* Underline style pour les H2 */
.heading {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, #ffdeae, #ffdeae), var(--cap-image-left), var(--cap-image-right);
  background-position-x: calc(var(--underline-cap-width) * var(--underline-width-scale)), 0, 100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size: calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 1.9))
      calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px), auto calc(var(--underline-width) * 1px);
  --underline-width: 17;
  --underline-offset-y: 9px;
  --cap-image-left: url("../images/ludification/left-2.svg");
  --cap-image-right: url("../images/ludification/right-2.svg");
}

.form-wrapper {
  padding-left: 15px;
}

.content-nav .onglet {
  margin-right: 5px;
  padding: 10px 50px;
}

.content-nav button {
  font-weight: bold;
  border: 0px;
  border-radius: 5px;
  padding: 10px 20px;
  color: #828282;
  background-color: #eaeaea;
}

.content-nav button.active {
  color: #1c1c1c;
  background-color: var(--white-content-tab-content);
}

.content-nav button:hover {
  cursor: pointer;
}

/* .tab-content styles définis dans .content-wrapper .tab-content */
/* #### Block suivi toujours visible ####*/
.content .tab-suivi {
  background: #ffffff;
  margin-bottom: 15px;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 1px 4px 4px 0 rgba(0, 0, 0, 0.24);
}

/* #### Index du site ###  */
.index-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.index-wrapper footer {
  margin-top: auto; /* Centrage automatique du footer en bas */
  padding-top: 50px;
  text-align: center;
}
.index-wrapper h1 {
  margin: 0;
  padding-top: 15px;
}
.index-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.nouveau-projet-personne {
  margin-top: 15px;
}
/*###### Formulaire de login ######*/
.login-page {
  width: 360px;
  padding: 2% 0 0;
}

.form {
  background: #ffffff;
  max-width: 360px;
  margin: 0 auto 0;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  text-transform: uppercase;
  outline: 0;
  background: var(--red-color);
  width: 100%;
  border: 0;
  padding: 15px;
  color: #ffffff;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.form button:hover,
.form button:active,
.form button:focus {
  background: #9e0000;
}

.form .register-form {
  display: none;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before,
.container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #ef3b3a;
}
/*###### FIN Formulaire de login ######*/
/* Message d'unfo à l'utlisateur a coté des input */
.info-utilisateur {
  font-weight: bold;
  margin-left: 6px;
  color: var(--red-color);
}

.update {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  width: 300px;
  margin: 25px;
  padding: 10px;
}

/* Classe qui sert à aligner les images et le texte contenus dans un <p>*/
.align-text-img {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Affichage de la div succes de MAJ du projet */
.form-feedback {
  display: inline-block; /* Set display property to inline-block */
  margin: 25px;
  padding: 10px;
  width: auto;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form-feedback + label {
  display: inline-block;
  text-align: left;
  width: auto;
}
/* Animateurs */
.animform {
  background: #ffffff;
    margin-bottom: 15px;
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 1px 4px 4px 0 rgba(0, 0, 0, 0.24);
    padding: 0 10px;
}
/* Absences */
.form-block-absences {
  display:flex;
  flex-direction: column;
  gap: 15px;
  margin:30px 0;
}
form.form-block-absences label {
  width: 200px !important;
}
form.form-block-absences,  h3{
  margin :0;
}
#popup_cw {
  background-color: #ddd;
}
#popup_cw div {
  background-color: unset;
}

#popup_cw label {
  color: #000;
  width: 100%;
  text-align: left;
  height: auto;
  background-color: unset;
  margin: 0 !important;
  margin-top: 10px !important;
  padding: 0 !important;

  float: none;
}
#popup_cw textarea {
  width: 100%;
  height: 32px;
}

#info-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  opacity: 1;
  transition: opacity 10s ease-in-out;
}
#info-popup.disappear {
  opacity: 0;
}

.filtres-staff-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.filtres-secteurs {
  display: flex;
}
.filtres-staff {
  display: inline-block;
  width: auto;
  text-align: left; /* Aligne le texte à gauche à l'intérieur du label */
}
.Entreprise {
  font-weight: bold;
  color: #909;
}
.Agence {
  font-weight: bold;
  color: #399;
}

#titre_entete {
  color: #235ba5;
  font-size: 40px;
  text-align: center;
  margin: auto;
}

#banniere {
  width: 800;
  height: 800;
  border: 0px solid gray;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #3f3f3f;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

#popup-content h2 {
  margin-top: 0;
}

#popup-content button {
  background-color: green;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

#map {
  height: 550px;
  width: 30%;
  float: right;
  position: relative;
  right: 0%;
  top: 219%;
}

.hide-map {
  display: none;
}

#bienvenue {
  color: #235ba5;
  font-size: 20px;
  text-align: left;
  display: block;
}

#vos_affaires label {
  float: left;
  display: block;
  margin-bottom: 8px;
  padding-top: 3px;
  width: 180px;
  text-align: right;
  background-color: white;
  margin-right: 10px;
  padding-right: 8px;
  height: 20px;
}
/* Nouvelle facture pour ce devis */
.content-wrapper.devis {
  background-color: #fff;
}

.infos-devis {
  display: flex;
  flex-direction: column;
  width: 97%;
  padding-top: 15px;
}

#BigRouge {
  color: var(--red-color);
  font-weight: bold;
  text-decoration: overline underline blink;
}
.rouge {
  color: #900;
}
.warning {
  display: inline;
  font-style: italic;
  background-color: rgba(255, 255, 0, 0.541);
  font-size: 0.8rem;
  font-weight: bold;
}

.popup {
  background-color: #ddd;
  height: auto;
  width: 500px;
  border: 1px solid #000;
  position: absolute;
  visibility: hidden;
  font-size: small;
  text-align: justify;
  padding: 5px;
  overflow: auto;
  z-index: 2;
}
.popup_bg {
  position: fixed;
  visibility: hidden;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  filter: alpha(opacity=70); /* for IE */
  opacity: 0.7; /* CSS3 standard */
  background-color: #999;
  z-index: 1;
}
.close_button {
  font-size: small;
  font-weight: bold;
  float: right;
  color: #666;
  display: block;
  text-decoration: none;
  border: 2px solid #666;
  padding: 0px 3px 0px 3px;
}
.popup_b {
  background-color: #fff;
  display: none;
  position: fixed;
  z-index: 2;
  width: 900px;
  padding: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 1px 3px 3px 0 rgba(0, 0, 0, 0.45);
}
.popup_b a {
  color: #fff;
}
.popup_b h3 {
  text-align: center;
  font-size: 1.33em;
}
.popup_b table {
  width: 100%;
}
.popup_b input[type="text"] {
  width: 100%;
}

.error {
  margin: 16px;
  padding: 16px;
  background-color: #fafafa;
  color: #900;
  font-size: 1.33em;
  font-weight: 700;
}
.success {
  margin: 16px;
  padding: 16px;
  background-color: #fafafa;
  color: #090;
  font-size: 1.33em;
  font-weight: 700;
}
.card {
  padding: 16px;
  color: #000;
  font-size: 1.13em;
  border-radius: 12px;
}
.card ul li {
  margin: 4px 0;
}
.card table tr {
  background-color: #fff;
}
.card table td {
  padding: 4px;
}
.bg input {
  padding: 6px;
  font-size: 1.33em;
}

div.inner p,
p.clearlabel {
  clear: both;
}

div.inner {
  background: none;
  width: calc(100% - 24px);
  margin: 0;
  padding: 0;
  float: left;
}
div.inner label {
  width: auto;
}
div.inner select {
  float: left;
}

div.inner input[type="text"] {
  width: 303px;
}
img.delete {
  width: 22px;
  vertical-align: middle;
  cursor: pointer;
}
#justificatifs li {
  padding: 5px 0;
}
#justificatifs li::after {
  content: "";
  display: block;
  margin-top: 5px;
  height: 1px;
  width: 622px;
  border-top: 1px solid #000;
}
#justificatifs li:last-child::after {
  content: none;
}

#mailavis {
  display: none;
}

div #objet {
  float: left;
  display: block;
  width: calc(100% - 240px);
  margin-bottom: 20px;
}
.ui-menu .ui-menu-item-wrapper {
  background: #fff;
  color: #000;
}

/* Style pour la popUp contact list (Champ Nom du contact de Nouveau_Projet et Nouveau_Prospect) */
.popup_contact_list {
  position: absolute;
  z-index: 1;
  background-color: white;
  border: 1px solid black;
}

.popup_contact_list div {
  padding: 5px;
  cursor: pointer;
}

.popup_contact_list div:hover {
  background-color: #f2f2f2;
}

/* Style CSS pour la fenêtre modale */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Style pour les onglets */
.tabs {
  display: flex;
}

.tabs a {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-bottom: none;
  background-color: #f1f1f1;
}

.tabs a:not(:last-child) {
  margin-right: 4px;
}

.tabs a:hover {
  background-color: #ddd;
}

/* Style pour le formulaire container */
.form-container {
  border: 1px solid #ccc;
  padding: 16px;
}

/* Style pour cacher les formulaires sauf celui sélectionné */
.form-container:not(:first-child) {
  display: none;
}

.table_absences td,
tr {
  text-align: left;
}

.recherche_prospection label {
  clear: both;
}

/* couleurs pour le DISC */
/* Classe pour le texte rouge */
.texte-rouge {
  color: red;
}

/* Classe pour le texte jaune */
.texte-jaune {
  color: var(--orange-color);
}

/* Classe pour le texte bleu */
.texte-bleu {
  color: blue;
}

/* Classe pour le texte vert */
.texte-vert {
  color: green;
}

/* Advanced Stats */
.chart-container-wrapper div {
  background-color: unset;
}
.chart-container-wrapper {
  display: grid;
  background-color: unset;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.chart-container {
  height: 300px;
}

#chartContainer,
#chartContainer7,
#chartContainer8 {
  grid-column: span 2;
}

/*#####################
    Ecran inférieur a 1320px
  #####################
*/
@media screen and (max-width: 1316px) {
  /* Boutons rouges du menu */
  .submenu .btn-red {
    margin: 10px 0;
  }
}