.flex_clinique_choice_drveto {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}
.loading_appointment_drveto {
	text-align:center;
}
.its_not_me_drv {
	cursor:pointer;
	margin-top: -5px;
	display: block;
	color: red;
}
.btn_flex_drv div {
	margin:5px
}
.choice_hour_of_appointment {
    display: flex;
    text-align: center;
	justify-content: space-around;
	flex-wrap: wrap;
}
.day_of_week_drv {
    font-weight: 900;
    font-size: 16px;
	padding: 0px;
	margin-top: 15px;
}
.lost_pwd_drv {
    color: red;
    cursor: pointer;
}
.day_drv_choosing {
    padding: 0px 10px 0px 10px;
}
.prise_rdv_dr_veto_flex_display h4, .prise_rdv_dr_veto_flex_display h5 {
	text-align:center;
}
.choice_new_pet_loop {
    border: 2px solid #ccc;
    text-align: center;
    z-index: 999;
    position: absolute;
	margin-top: -10px;
	border-radius: 5px;
}
.choose_new_pet_class_new_pet_esp_drv_connect, .choose_new_pet_class_new_pet_race_drv_connect, .choose_new_pet_class_other {
	background-color: rgba(255,255,255,1);
	cursor: pointer;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	font-weight: 500;
	transition:all 0.3s ease;
}
.choose_new_pet_class_new_pet_esp_drv_connect:hover, .choose_new_pet_class_other:hover, .choose_new_pet_class_new_pet_race_drv_connect:hover {
	background-color: rgba(192, 192, 192,1);
}
#choose_drv_veto h4, #choose_drv_veto h5, #choose_drv_veto h6, #choose_drv_veto .choose_this_vet_drv {
	margin: auto;
	text-align: center;
	margin-bottom:10px;
	margin-top:10px;
	width: 100%;
}
.photo_vet_drv {
	border-radius: 3px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px;
	transition: all .3s ease;
	max-width: 150px;
}
.photo_vet_drv:hover {
    /* border-radius: 5px; */
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px;
}
#choose_drv_veto {
	padding:20px;
}
.choose_this_vet_drv h4 {
	padding:0px;
}
.list_vets_or_clinic{
	display: flex;
	flex-wrap: wrap;
}
.rdv_is_choosed {
	border: 2px solid var(--primary-color);
	border-radius: 15px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
.veto_choosing {
	width: 20px;
  display:none;
	height: 20px;
}
.input_drv_ {
	display: flex;
    align-items: center;
    width: max-content;
    margin: auto;
}
.btn_flex_drv {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.user_drv_connect {
   width: 100%;
   margin-bottom: 10px !important;
   border: 3px solid #024e63 !important;
   line-height: 45px;
   height: 45px;
   font-size: 18px;
   font-weight: 700;
   text-align: center;
   border-radius: 5px;
}
.choose_this_vet_drv{
	width: max-content;
	padding: 15px;
	/*border-radius: 5px;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.2);*/
	margin:10px;
	cursor:pointer;
	
}
.desc_drv_vet {
	  
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-o-filter: blur(0px);
	-ms-filter: blur(0px);
	filter: blur(0px);
	opacity:1;
	
	transition:all .3s ease;
}
.div_input_drv_choosen {
    padding: 10px 10px 10px 0px;
}
.choose_another_date, .choose_another_hour {
    line-height: 40px;
    border: 2px solid #024e63;
	border-radius:10px;
    color: #024e63;
    font-size: 18px;
    text-align: center;
}
.h_of_appointment {
    background-color: #eff5ff;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 100px;
    padding: 10px !important;
	color:#024e63;
	font-size: 16px;
	font-weight: 700;
	width: 85px;
	margin-right: auto;
	margin-left: auto;
	cursor:pointer;
	transition: all .3s ease;
}
.h_of_appointment:hover {
    background-color: #024e63;
	color:#fff;
}
.date_day_of_week_drv {
    font-size: 16px;
	padding-bottom:0px;
}
.map_drveto_gg {
	margin-top: 20px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
.clinic_choice_drveto {
	margin: 20px;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 5px;
	padding: 30px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	transition: all .5s ease;
}
.clinic_choice_drveto_flex {
	display:flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap-reverse;
}
.prise_rdv_dr_veto_flex_display {
	display:none;
	padding: 20px;
}
.clinic_choice_drveto:hover {
	border: 1px solid transparent;
	box-shadow: 2px 2px 20px rgba(0,0,0,0.5);
}

.btn_drv_totum {
	cursor:pointer;
	color: #024e63;
	border-width: 3px ;
	border-color: #024e63;
	border-radius: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 15px 20px;
	font-size: 19px;
	background-color:#fff;
	transition:all .3s ease;
}
.btn_drv_totum:hover {
	color: #e02b20;
	border-color: #e02b20;
}
.center_drv_totum, .center_drv_totum_2, .center_drv_totum_3 {
	text-align:center;
	flex: auto;
}
.select_type_int_drveto {
	cursor:pointer;
    border: 2px solid #024e63;
    border-radius: 3px;
    width: 100%;
    text-align: center;
    height: 35px;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 10px;
	color:#024e63;
}
.btn_choose_another_date {
    line-height: 40px;
    font-size: 15px;
    font-weight: 500;
    padding: 1px 15px;
    margin-left: 30px;
    border: 2px solid #024e63;
}
.required__input {
	border-color: red !important;
	box-shadow: 0px 0px 2px inset red !important;
}
.required__radio {
	filter: drop-shadow(.5px .5px .5px red) drop-shadow(-.5px -.5px .5px red) drop-shadow(-.5px .5px .5px red) drop-shadow(.5px -.5px .5px red)  ;
}
.comment_user_drv_connect {
	text-align:left;
	height: auto !important;
}
.hr_drv {
	margin: 30px;
	flex: available;
	flex: -moz-available;
	flex:-o-available;
	flex:-webkit-available;
	flex:-ms-available;
	flex:-khtml-available;
}

.confirm_this_vet_drv {
	font-size:15px;
}

@media screen and (max-width: 640px) {
	.clinic_choice_drveto {
		margin:5px !important;
		padding: 10px !important;
	}
	.btn_drv_totum, .select_type_int_drveto, .choose_another_date, .choose_another_hour, #choose_pet_user_drv {
		font-size:15px !important;
		height: 60px !important;
	}
	#choose_drv_veto {
		padding:0px !important;
	}
	.choose_this_vet_drv {
	    padding: 0px 15px !important;
	}
	.confirm_this_vet_drv, .submit_register_wp_connect {
		margin-bottom: 10px !important;
	}
	.h_of_appointment {
		font-size:18px !important;
		margin-top: 0px !important;
		margin-bottom: 30px !important;
		border-radius: 100px !important;
		padding: 15px 35px !important;
		width: auto !important;
	}
	.center_drv_totum_2, .center_drv_totum_3 {
		margin-bottom: 15px !important;
	}
	.user_drv_connect_info {
		margin-bottom: 40px !important;
	}
}

/* ================================================================
   PROGRESS BAR — progress-bar.css
   v3.0 | Shortcode WordPress [progress_bar]
   ================================================================ */

/* ----------------------------------------------------------------
   VARIABLES CSS GLOBALES
   Surchargez ces valeurs dans votre thème via :root {}
   ou par instance via style="--pb-fill-color: #xxx" sur le wrapper
   ---------------------------------------------------------------- */
:root {
  /* Couleurs */
  --pb-fill-color:        #1a5c4e;
  --pb-fill-color-light:  #3d9e87;
  --pb-track-color:       #e8e4dc;
  --pb-track-border:      #d4cfc6;
  --pb-label-color:       #2c2925;
  --pb-meta-color:        #9a948e;
  --pb-cursor-bg:         #fff;
  --pb-bubble-bg:         #1a5c4e;
  --pb-bubble-text:       #fff;

  /* Dimensions */
  --pb-height:            16px;
  --pb-radius:            999px;
  --pb-cursor-size:       22px;
  --pb-cursor-border:     3px;

  /* Typographie */
  --pb-font:              'DM Mono', ui-monospace, monospace;
  --pb-font-size:         0.7rem;
  --pb-bubble-font-size:  0.68rem;

  /* Animation — durée partagée CSS + jQuery */
  --pb-duration:          1.2s;
  --pb-easing:            cubic-bezier(0.65, 0, 0.35, 1);

  /* Espacement */
  --pb-gap:               0.5rem;
  --pb-bubble-offset:     10px;
  --pb-bubble-padding:    1.5rem;
}

/* ----------------------------------------------------------------
   WRAPPER
   ---------------------------------------------------------------- */
.progress-bar-wrapper {
	width: 100%;
	/* font-family: var(--pb-font); */
	display: flex;
	flex-direction: column;
	gap: var(--pb-gap);
	border: 1px solid rgba(0,0,0,0.1);
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
	margin-bottom: 20px;
}

/* ----------------------------------------------------------------
   HEADER : label
   ---------------------------------------------------------------- */
.progress-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.progress-bar-label {
  font-size: var(--pb-font-size);
  font-weight: 500;
  color: var(--pb-label-color);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------------
   STAGE : espace réservé pour la bulle au-dessus de la piste
   ---------------------------------------------------------------- */
.progress-bar-stage {
  position: relative;
  /* espace vertical : hauteur bulle + flèche + offset */
  padding-top: calc(var(--pb-bubble-padding) + var(--pb-bubble-offset) + 6px);
}

/* ----------------------------------------------------------------
   PISTE (track)
   ---------------------------------------------------------------- */
.progress-bar-track {
  position: relative;
  width: 100%;
  height: var(--pb-height);
  background: var(--pb-track-color);
  border: 1px solid var(--pb-track-border);
  border-radius: var(--pb-radius);
  overflow: visible;
}

/* ----------------------------------------------------------------
   FILL
   --pb-percent est injectée par PHP en style inline.
   L'animation @keyframes part de 0% et va à --pb-percent.
   ---------------------------------------------------------------- */
.progress-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: var(--pb-radius);
  background: linear-gradient(
    90deg,
    var(--pb-fill-color)       0%,
    var(--pb-fill-color-light) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* Entrée : part de 0 → --pb-percent */
  animation: pb-grow var(--pb-duration) var(--pb-easing) both;
}

@keyframes pb-grow {
  from { width: 0%; }
  to   { width: var(--pb-percent, 0%); }
}

/* Shimmer continu */
.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15) 50%,
    transparent
  );
  animation: pb-shimmer 2.6s ease-in-out infinite;
}

@keyframes pb-shimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* ----------------------------------------------------------------
   CURSEUR
   Démarre à left: 0% (état initial).
   jQuery lui ajoute .pb-ready après l'animation, ce qui active
   la transition CSS pour les mises à jour AJAX suivantes.
   ---------------------------------------------------------------- */
.progress-bar-cursor {
  position: absolute;
  top: 50%;
  left: 0%;                          /* position initiale = départ */
  transform: translate(-50%, -50%);
  width: var(--pb-cursor-size);
  height: var(--pb-cursor-size);
  border-radius: 50%;
  background: var(--pb-fill-color-light);
  border: var(--pb-cursor-border) solid var(--pb-cursor-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 2;

  /* Entrée synchronisée avec le fill */
  animation: pb-cursor-grow var(--pb-duration) var(--pb-easing) both;

  /* Transition AJAX — activée seulement après .pb-ready */
  transition: none;
}

@keyframes pb-cursor-grow {
  from { left: 0%; }
  to   { left: var(--pb-percent, 0%); }
}

/* Une fois l'animation initiale terminée, on active la transition */
.progress-bar-cursor.pb-ready {
  animation: none;
  transition: left var(--pb-duration) var(--pb-easing);
}

/* Halo pulsant */
.progress-bar-cursor::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--pb-fill-color-light);
  opacity: 0;
  animation: pb-pulse 2.6s ease-in-out infinite 1.6s;
}

@keyframes pb-pulse {
  0%, 100% { transform: scale(1);   opacity: 0; }
  50%       { transform: scale(1.7); opacity: 0.18; }
}

/* ----------------------------------------------------------------
   BULLE FLOTTANTE
   Démarre à left: 0% comme le curseur.
   ---------------------------------------------------------------- */
.progress-bar-bubble {
  position: absolute;
  /* bottom: calc(100% + var(--pb-bubble-offset) + 6px); */
  bottom: calc(100% - ( var(--pb-bubble-offset) + var(--pb-bubble-padding) ) + 6px);
  left: 0%;                          /* position initiale = départ */
  transform: translateX(-50%);

  background: var(--pb-bubble-bg);
  color: var(--pb-bubble-text);
  /* font-family: var(--pb-font); */
  font-size: var(--pb-bubble-font-size);
  font-weight: 500;
  white-space: nowrap;
  padding: 0.28em 0.65em;
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;

  /* Entrée synchronisée */
  animation: pb-bubble-grow var(--pb-duration) var(--pb-easing) both;
  transition: none;
}

@keyframes pb-bubble-grow {
  from { left: 0%; }
  to   { left: var(--pb-percent, 0%); }
}

.progress-bar-bubble.pb-ready {
  animation: none;
  transition: left var(--pb-duration) var(--pb-easing);
}

/* Flèche vers le bas */
.progress-bar-bubble::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--pb-bubble-bg);
}

/* ----------------------------------------------------------------
   FOOTER : min / max
   ---------------------------------------------------------------- */
.progress-bar-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-bar-min,
.progress-bar-max {
  font-size: calc(var(--pb-font-size) * 0.9);
  color: var(--pb-meta-color);
}

/* ================================================================
   VARIANTES DE COULEUR
   Usage : color="pb-amber" dans le shortcode
   ================================================================ */
.pb-amber {
  --pb-fill-color:       #92400e;
  --pb-fill-color-light: #d97706;
  --pb-bubble-bg:        #92400e;
}

.pb-rose {
  --pb-fill-color:       #881337;
  --pb-fill-color-light: #f43f5e;
  --pb-bubble-bg:        #881337;
}

.pb-slate {
  --pb-fill-color:       #1e293b;
  --pb-fill-color-light: #64748b;
  --pb-bubble-bg:        #1e293b;
}

.pb-indigo {
  --pb-fill-color:       #312e81;
  --pb-fill-color-light: #818cf8;
  --pb-bubble-bg:        #312e81;
}

/* ================================================================
   VARIANTES DE TAILLE
   Usage : size="pb-thick" dans le shortcode
   ================================================================ */
.pb-thick {
  --pb-height:       26px;
  --pb-cursor-size:  28px;
}

.pb-thin {
  --pb-height:       8px;
  --pb-cursor-size:  16px;
  --pb-cursor-border: 2px;
  --pb-gap:          0.35rem;
}