:root {
  --ion-font-family: "Red Hat Display", sans-serif;
  --color: #000;

  --primary: #f00;
  --secondary: #E0FBFC;
  --tertiary: ;


  --ion-color-primary: #2563eb;
  --ion-color-secondary: #14b8a6;
  --ion-color-tertiary: #8b5cf6;

  --ion-color-success: #22c55e;
  --ion-color-warning: #f59e0b;
  --ion-color-danger: #ef4444;

  /*(primary, secondary, tertiary, success, warning, danger, medium, light, dark)*/
}


/*
/* Container segment : centré et scroll horizontal si beaucoup de bullets */
ion-segment {
  display: flex;
  justify-content: center;
  /*max-width: 70%;
  margin: 0 auto;  */      
  --background: transparent;  
  overflow-x: auto;
  gap: 0;                
  padding: 5px 0;        
}

ion-segment {
    --background: #eee;
  }

.segment-bullet {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--ion-color-medium);
  margin: 0 0;
}

.segment-bullet.active {
  background-color: var(--ion-color-primary);
}

ion-segment-button::part(indicator-background) {
    background: transparent;
    --indicator-box-shadow: none !important;
  }
ion-segment-button {
    min-width: 30px;
}


  ion-segment-button.md::part(native) {
    color: #000;
  }

  .segment-button-checked.md::part(native) {
    color: #eee;
  }

  ion-segment-button.md::part(indicator-background) {
    height: 4px;
  }


.segment-bullet {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #888;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.segment-bullet.active {
    background: #3880ff;
}


div#reseauxSegment {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: transparent;
    bottom: 0;
    background: rgba(255,255,255,0.85);
}

/* TOOLBAR */

ion-toolbar {
    --background: #fff;
    --color: #000;

    --border-color: #fff;
    --border-width: 0px 0;
    --border-style: none;

    /*--min-height: 80px;
    --padding-top: 20px;
    --padding-bottom: 20px;*/
  }

  .header-md {
    -webkit-box-shadow: unset;
    box-shadow: unset;
}



/* Swiper */

/* Corrige la hauteur d'un slide vide pour swipe */
.swiper .swiper-wrapper .swiper-slide {
  min-height: calc(100vh - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
}

.swiper .swiper-wrapper {
  margin-bottom: 50px;
}

.swiper-pagination {
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.75);
  /*background: transparent;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 3rem;
  margin-bottom: 15px;*/
  background: #3D5A80;
  border-radius: 3rem;
  margin-bottom: 15px;
}

.swiper-pagination-bullet {
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
    background: var(--swiper-pagination-bullet-inactive-color, #fff);
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: #14b8a6;
  opacity: 1 !important;
}



/* Cities */
div.cityHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: space-between;
}


div.reseauNom, div.cityPopulation {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}


div.city h2 {
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: 600;
}



/* Modal prelevements details */


ion-list.prelevements-details-informations ion-item {
  margin-bottom: 5px;
    --inner-border-width: 0;
  --border-width: 0;
}

#fetchSpinner {
  display: block;
  margin: 40px auto;
}



.city .ion-padding {
  background: #3D5A80;
  padding-top: 3rem;
  padding-bottom: 3rem;
}




.txt1 {
  color: var(--ion-color-dark) !important;
  font-weight: 600 !important;
}

.p {
  color: var(--ion-color-dark) !important;
  margin-bottom: 2px !important;
  font-size: 0.825rem !important;
  line-height: 1rem !important;
  font-weight: 500;
}

.p-medium {
  color: var(--ion-color-medium) !important;
  margin-bottom: 2px !important;
  font-size: 0.825rem !important;
  line-height: 1rem !important;
  font-weight: 500;
}

.itemEmpty {

}


.mw {
  max-width: 1400px;
  margin: auto;
}