body {
  font-size: 16px; /* Taille de base de la police */
  margin: 0px;
  padding: 0px;
  background: #000;
}


.card-body-custom {
  background-color: white !important;
  color: black !important; /* Vous pouvez ajuster cette couleur selon vos besoins */
}
.card-body-custom h5,
.card-body-custom p {
  color: black !important; /* Assurez-vous que le texte est visible sur fond blanc */
}

.small-svg {
  width: 90px; /* Ajustez la largeur selon vos besoins */
  height: auto; /* Maintient le ratio d'aspect */
}

/* Styles généraux pour LTR (gauche à droite) */
.modal-dialog {
  text-align: left;
}

/* Styles pour RTL (droite à gauche) */
:lang(ar) .modal-dialog,
:dir(rtl) .modal-dialog {
  text-align: right;
}
.ltr .control-label {
  float: left;
}

/* Style par défaut pour LTR */
.ltr .form-group {
  text-align: left;
}

.ltr .control-label {
  float: left;
}

/* Style pour RTL */
.rtl .form-group {
  text-align: right;
}

.rtl .control-label {
  float: right;
}

html {
  text-size-adjust: 100% !important;  /* Standard property for text size adjustment */
}

#vid_container {
  position: fixed;
  top: 0;
  left: 0;
}

#video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#gui_controls {
  position: fixed;
  background-color: #111; /*rgba(255, 0, 0, 0.5);*/
  z-index: 2;
  bottom: 0;
}

#video_overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 10;
  background-color: #111;
}


/* Ajout de styles pour la boîte de dialogue modale */
.modal {
  display: none; 
  /*display: block;  Override Bootstrap's default*/
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%; /* Largeur de la boîte modale */
  height: 100%; /* Hauteur de la boîte modale */
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
}



.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* Centre la boîte modale verticalement et horizontalement */
  padding: 20px;
  border: 1px solid #888;
  width: 70%; /* Largeur du contenu de la boîte modale */
}

/* Style pour le bouton de fermeture */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

/* Styles pour les différentes couleurs de header */
.red-header {
  background-color: red; /* Rouge */
  color: white; /* Texte en blanc */
}

.yellow-header {
  background-color: yellow; /* Jaune */
  color: black; /* Texte en noir */
}

.green-header {
  background-color: green; /* Vert */
  color: white; /* Texte en blanc */
}


/*  Button style from: 
    https://googlesamples.github.io/web-fundamentals/fundamentals/media/mobile-web-video-playback.html */

button {
  outline: none;
  position: absolute;
  color: white;
  display: block;
  opacity: 1;
  background: transparent;
  border: solid 2px #fff;
  padding: 0;
  text-shadow: 0px 0px 4px black;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: auto;
  z-index: 2;
}

#takePhotoButton {
  display: none;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background-image: url('img/ic_photo_camera_lock_48px.svg');
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}
#takePhotoButton[aria-pressed='true']{
  background-image: url('img/ic_photo_camera_white_48px.svg');;
}
/* #takePhotoButton:active { */
  /* background-color: #000000; */
/* } */

#addNewVisiteButton {
  display: none;
  width: 64px;
  height: 64px;
  background-image: url('img/ic_fullscreen_white_48px.svg');
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}

#addNewVisiteButton[aria-pressed='true'] {
  background-image: url('img/ic_fullscreen_exit_white_48px.svg');
}

#loginButton {
  display: none;
  width: 64px;
  height: 64px;
  background-image: url('img/ic_camera_rear_white_36px.svg');
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}

#loginButton[aria-pressed='true'] {
  background-image: url('img/ic_camera_front_white_36px.svg');
}



@media screen and (orientation: portrait) {
  body {
    font-size: 14px; /* Réduire la taille de la police pour les appareils mobiles */
  }
  /* portrait-specific styles */

  /* video_container (video) doesn't respect height... 
       so we will fill it in completely in portrait mode
    */
  #vid_container {
    width: 100%;
    height: 80%;
  }

  #gui_controls {
    width: 100%;
    height: 20%;
    left: 0;
  }

  #loginButton {
    left: calc(20% - 32px);
    top: calc(50% - 32px);
  }

  #addNewVisiteButton {
    left: calc(80% - 32px);
    top: calc(50% - 32px);
  }
    /* Ajoutez la modification ici */
  .table-responsive-sm {
      overflow-y: auto; /* Utilisation du défilement automatique */
  }
}

@media screen and (orientation: landscape) {
  body {
    font-size: 14px; /* Réduire la taille de la police pour les appareils mobiles */
  }

  #vid_container {
    width: 80%;
    height: 100%;
  }

  #vid_container.left {
    left: 20%;
  }

  /* we default to right */
  #gui_controls {
    width: 20%;
    height: 100%;
    right: 0;
  }

  /* for the lefties */
  #gui_controls.left {
    left: 0;
  }

  #loginButton {
    left: calc(50% - 32px);
    top: calc(18% - 32px);
  }

  #addNewVisiteButton {
    left: calc(50% - 32px);
    top: calc(82% - 32px);
  }
    /* Ajoutez la modification ici */
  .table-responsive-sm {
      overflow-y: auto; /* Utilisation du défilement automatique */
  }
}


/* Style pour les éléments select */
select {
  font-size: 16px; /* Taille de la police par défaut */
  width: 150px; /* Largeur des menus déroulants */
  margin-right: 10px; /* Marge à droite pour séparer les menus déroulants */
}

/* Style pour la balise div avec l'ID additionalContent */
#additionalContent {
  display: flex; /* Affichage en tant que flexbox */
}


#result{
  text-align: center; 
  font-size: 20px; /* Taille de la police par défaut */
  display: flex; /* Affichage en tant que flexbox */
}

/* icon  */
.custom-icon {
  font-size: 36px !important; /* Définissez la taille de police souhaitée */
}

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* Pour Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Pour Internet Explorer et Chrome 53+ */
}

.invisible-tab {
  display: none; /* Masquer l'onglet */
}



/*  Loader   */
.container2 {
  display: none; /* Par défaut, le loader est désactivé */
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.137); /* Fond transparent */
  z-index: 9999;
}

.container2.active {
  display: flex; /* Activer le loader lorsque la classe active est présente */
}

.loader {
  max-width: 15rem;
  width: 100%;
  height: auto;
  stroke-linecap: round;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
circle {
  fill: none;
  stroke-width: 3.5;
  animation: preloader 3s infinite ease-in-out;
  transform-origin: 170px 170px;
  will-change: transform;
}

circle:nth-of-type(1) {
  stroke-dasharray: 550;
  animation-delay: -0.15s;
}

circle:nth-of-type(2) {
  stroke-dasharray: 500;
  animation-delay: -0.3s;
}

circle:nth-of-type(3) {
  stroke-dasharray: 450;
  animation-delay: -0.45s;
}

circle:nth-of-type(4) {
  stroke-dasharray: 300;
  animation-delay: -0.6s;
}

@keyframes preloader {
  50% {
      transform: rotate(360deg);
  }
}

.btn-green {
  background-color: green;
  color: white;
}
.btn-green.active, .btn-green:active {
  background-color: darkgreen;
  color: white;
}
.btn-blue {
  background-color: blue;
  color: white;
}
.btn-blue.active, .btn-blue:active {
  background-color: darkblue;
  color: white;
}


.dashboard-icon {
  font-size: 2rem;
  color: #fff; /* Couleur blanche pour les icônes */
}
.card-body-colored {
  display: flex;
  align-items: center;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}
.bg-primary {
  background-color: #d40f9c !important;
}
.bg-success {
  background-color: #28a745 !important;
}
.bg-warning {
  background-color: #ffc107 !important;
}
.icon-container {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.1); /* Couleur de fond légère pour la conteneur */
  border-radius: 50%; /* Pour rendre le conteneur circulaire */
  margin-right: 20px;
}

.btn-light {
  color: #212529  !important;
  background-color: #f8f9fa  !important;
  border-color: #000000  !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.btn-light.pressed {
  color: #ffffff  !important;
  background-color: #f90000  !important;
  border-color: #dae0e5  !important;
}
.form-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.form-group {
  margin-bottom: 1rem;
}
.hidden {
  display: none;
}

.hidden-option {
  display: none;
}

.bidi-text {
  direction: rtl;
  unicode-bidi: embed;
}


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

/* .modal-body {
  text-align: center;
} */
/* .form-group {
  display: flex;
  flex-direction: column;
} */

.modal-body .btn-group {
  display: flex;
  justify-content: center;
  margin-bottom: 15px; /* Ajustez la marge si nécessaire */
}

.control-label {
  font-weight: bold;
  margin-bottom: 1px; /* Espace entre le label et les boutons */
}

.btn-group-toggle .btn {
  margin-right: 1px; /* Espace entre les boutons */
}

.btn-group-toggle {
  display: flex;
  align-items: center;
}


.card-body {
  text-align: center; /* Centre le texte à l'intérieur des cartes */
}
.card-title {
  font-size: 2em; /* Augmente la taille de la police */
  
}



/* .form-group-separator {
  margin-top: 20px;
} */


table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

button#toggleButton {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
} */

.edit-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #007bff;
}

.edit-button i {
  font-size: 16px;
}


.btn-spacing {
  margin-right: 5px !important;
}

.btn-separated {
  position: relative;
}

.btn-separated:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -5px; /* Ajustez cette valeur selon vos besoins */
  width: 10px; /* Largeur de la séparation blanche */
  height: 100%;
  background-color: white !important;
}

.edit-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #007bff;
}

.edit-button i {
  font-size: 16px;
}
#infoTable {
  display: none; /* Initial state is hidden */
}


.custom-whatsapp-icon {
  font-size: 24px; /* Vous pouvez ajuster la taille selon vos besoins */
}

.inline-elements {
  display: flex; /* Utilise flexbox pour centrer le contenu */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement, si nécessaire */
  height: 100%; /* Ajuster la hauteur si nécessaire */
}

.inline-elements .btn {
  display: inline-block; /* Assurez-vous que le bouton reste en ligne */
}
/* loader info */

.container3 {
  position: relative;
  display: inline-block;
  margin: 100px auto;
  text-align: center;
  z-index: 1000; /* Met le container3 au premier plan */
  top: -60px; /* Déplace le loader un peu vers le haut */
}

.loader3 {
  width: 144px;  /* 48px * 3 = 144px */
  height: 144px; /* 48px * 3 = 144px */
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index: 1001; /* Assure que l'animation est au-dessus des autres éléments */
}

.loader3::after,
.loader3::before {
  content: '';  
  box-sizing: border-box;
  width: 144px;  /* 48px * 3 = 144px */
  height: 144px; /* 48px * 3 = 144px */
  border-radius: 50%;
  background: #007BFF; /* Bleu */
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}

.loader3::after {
  animation-delay: 1s;
}

@keyframes animloader {
  0% {
      transform: scale(0);
      opacity: 1;
  }
  100% {
      transform: scale(1);
      opacity: 0;
  }
}

.loader3-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px; /* 24px * 3 = 72px */
  color: #FFF; /* Icône blanche */
  z-index: 1002; /* Assure que l'icône est au-dessus de tout */
}

/* whatsup  */


        /* Style pour le conteneur du bouton */
        .container4 {
          position: fixed; /* Position fixe pour maintenir le bouton en bas à droite */
          bottom: 20%; /* Distance du bas de la fenêtre */
          right: 1%; /* Distance du bord droit de la fenêtre */
          display: inline-block;
          text-align: center;
          z-index: 1000; /* Met le container4 au premier plan */
      }

      /* Style pour l'élément de chargement */
      .loader4 {
          width: 144px;  /* 48px * 3 = 144px */
          height: 144px; /* 48px * 3 = 144px */
          display: inline-block;
          position: relative;
          cursor: pointer;
          z-index: 1001; /* Assure que l'animation est au-dessus des autres éléments */
      }

      .loader4::after,
      .loader4::before {
          content: '';  
          box-sizing: border-box;
          width: 144px;  /* 48px * 3 = 144px */
          height: 144px; /* 48px * 3 = 144px */
          border-radius: 50%;
          background: #28a745; /* Vert */
          position: absolute;
          left: 0;
          top: 0;
          animation: animloader 2s linear infinite;
      }

      .loader4::after {
          animation-delay: 1s;
      }

      @keyframes animloader {
          0% {
              transform: scale(0);
              opacity: 1;
          }
          100% {
              transform: scale(1);
              opacity: 0;
          }
      }

      /* Style pour l'icône SVG à l'intérieur du bouton */
      .loader4-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 40px; /* Ajustez la taille selon vos besoins */
          height: auto;
          color: #FFF; /* Icône blanche */
          z-index: 1002; /* Assure que l'icône est au-dessus de tout */
      }

      /* Style pour le lien */
      .button-link {
          text-decoration: none;
      }




/* Style du conteneur pour positionner les boutons en bas à droite */
.button-container {
  position: fixed;
  bottom: 20%;
  right: 1%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 9999; /* Assure que le conteneur est au-dessus de tous les autres éléments */
}

.clickable-img {
  width: 50px; /* Ajustez la taille selon vos besoins */
  height: auto;
  transition: box-shadow 0.3s ease;
  cursor: pointer; /* Change le curseur pour indiquer que l'image est cliquable */
}

/* Effet d'ombre lors du survol */
.clickable-img:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}