/* Forcer l'arrière-plan sombre pour le calendrier */
#fbuilder .ui-datepicker, 
#fbuilder .ui-datepicker-inline {
  background-color: #0A0711 !important; /* Arrière-plan sombre du calendrier */
  width: 100% !important; /* S'assurer que le calendrier utilise 100% de la largeur */
  box-sizing: border-box !important; /* Empêcher que les bordures et paddings affectent la taille */
}

/* Arrière-plan des cases du calendrier (dates et bordures) */
#fbuilder .ui-datepicker td, 
#fbuilder .ui-datepicker th {
  background-color: #0A0711 !important; /* Arrière-plan sombre pour chaque case */
  border: 1px solid #871C1F !important; /* Bordure rouge autour des dates */
  padding: 10px !important; /* Espacement ajusté pour les petits écrans */
  font-size: 14px !important; /* Réduire la taille du texte pour les mobiles */
}

/* Couleur des dates */
#fbuilder .ui-datepicker td a {
  color: #FFF !important; /* Texte des dates en blanc */
}






/* Sélecteur de date (date sélectionnée) */
#fbuilder .ui-datepicker .ui-state-active {
  background: #D63539 !important; /* Sélection active en rouge */
  color: #FFF !important; /* Texte de la date en blanc */
}

/* Survol des dates */
#fbuilder .ui-datepicker td a:hover {
  background: #D63539 !important; /* Sélecteur survolé en rouge */
  color: #FFF !important; /* Texte survolé en blanc */
}

/* En-tête du calendrier (jours de la semaine) */
#fbuilder .ui-datepicker-header {
  background: #550000 !important; /* Fond de l'en-tête */
  color: #FFF !important; /* Texte des jours de la semaine en blanc */
  text-shadow: none !important;
	
}

#fbuilder .pbNext,#fbuilder .pbPrevious {color: #fff;font-weight: bold;}


/* Pour les appareils mobiles, ajuster la taille du calendrier et des éléments */
@media only screen and (max-width: 768px) {
  /* Ajuster la taille du calendrier */
  #fbuilder .ui-datepicker {
    width: 100% !important; /* Prendre 100% de la largeur */
    font-size: 12px !important; /* Réduire la taille de la police sur mobile */
  }

  /* Ajuster la taille des cases pour les petits écrans */
  #fbuilder .ui-datepicker td, 
  #fbuilder .ui-datepicker th {
    font-size: 12px !important; /* Réduire la taille du texte pour les petits écrans */
    padding: 8px !important; /* Réduire l'espacement des cases */
  }

  /* Ajuster les dates et survol */
  #fbuilder .ui-datepicker td a {
    font-size: 12px !important; /* Réduire la taille du texte des dates */
    padding: 8px !important; /* Ajuster l'espacement des dates */
  }
}