body {
	background-color: #f4f4f4 !important;
	font-family: "Roboto", sans-serif !important;
  	font-optical-sizing: auto;
  	font-weight: <weight>;
  	font-style: normal;
  	font-variation-settings:
    "wdth" <width>;
	}


a.nav-link {
	font-family: "Roboto", sans-serif;
	font-size: 14px !important;
	color: black !important;
	}


footer {
	font-family: "Roboto", sans-serif;
	color: black !important;
	}

footer h6 {
	font-size: 32px;
	font-weight: 900;
	}

h6 {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	}

h6.antidote {

	}

.my-card {
	position: absolute;
	top: -10px;
	right: -10px;
	}
	
ul.list-group li:last {
	border: none !important;
	}
	
ul.list-group li:hover {
	background-color: #5daae6;
	color: white;
	}
	
	
.date_add:hover {
	background-color: transparent !important;
	color: black !important;
	}
	
ul.list-group li i {
	font-size: 1.6rem;
	}
	
ul.list-group li:hover i {
	color: white !important;
	}

.justify p {
	text-align: justify !important;
}

/* This for podcast cover */

.cover { 
  background-repeat: no-repeat; background-size: contain;
  box-shadow: 0  2px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
  margin: auto !important;
  border: 1px solid gray !important;
  border-radius: 5px;

  width: calc(187px - 93px) ;
  height: calc(290px - 145px) ;
}

.cover_big { 
  background-repeat: no-repeat; background-size: contain;
  box-shadow: 0  2px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
  margin: auto !important;
  border: 1px solid gray !important;
  border-radius: 5px;
  
  width: calc(187px - 93px) ;
  height: calc(590px - 145px) ;

}




.ellipsis {
	height: 100px;
  overflow: hidden;
}

.elouan_1 {
	height: 100px;
  overflow: hidden;
}


.image-wrapper {
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    font-family: sans-serif;
    font-size: 1.1rem;
    position: relative;
    transition: all 0.3s ease-in-out;
  }

  .color-palette {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    display: bloc;
  }

  .color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
  }


.card-img-overlay h4 {
	font-size: 22px !important;
	text-transform: capitalize;
	letter-spacing: -1px;
	word-spacing: 2px;
}



.podcast h4 {
	font-size: 1rem !important;
}



/* This for the Howler custom CENAC Player */
	.audio-player, .podcast-player {
      width: auto;
      max-width: 600px;
      display: block;
      height: auto;
    }

    .player-button, .play-pause-btn {
      font-size: 4rem;
      border: none;
      background: transparent;
      color: #fff;
      transition: transform 0.3s ease;
    }

    .player-button:hover {
      transform: scale(1.1);
    }

    .pulsing {
      animation: pulse 1.8s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.85; }
    }
    
	.progressContainer {
		width: 100%;
		height: 8px;
		background: rgba(255,255,255,0.2);
		border-radius: 4px;
		overflow: hidden;
		margin-top: 10px;
		cursor: pointer;
		}
		
	.progressBar {
		background: white;
		width: 0%;
		height: 100%;
		transition: width 0.1s linear;
		}
		
    .progress {
      	height: 6px;
      	background-color: rgba(255, 255, 255, 0.1);
      	cursor: pointer;
	  	margin-top: 1rem;
    	}

    .progress-bar {
      	background-color: #fff;
      	transition: width 0.1s linear;
    	}

   .time-counter {
		margin-top: 0.5rem;
		font-size: 0.95rem;
		color: #eee;
		font-family: monospace;
		text-align: center;  /* <-- Center horizontally */
		user-select: none;
		}
    
/* END MP3 PLAYER */

	ul.pagination li {
		display: inline-block;
		}
		
	ul.pagination li a {
		display: inline-block;
		border: 1px solid red;
		}
	
	ul.pagination li a.active {
		border: 1px solid blue !important;
		font-weight: bold !important;
		}
	
	footer a {
		color: black !important;
		padding: 0 10px 0 10px;
		}


/* Temporary page */

/* Animate the button, outside */
	.pulse:hover,
	.pulse:focus {
	  -webkit-animation: pulse 1s;
	          animation: pulse 1s;
	          animation-timing-function: ease-in-out;
	          animation-iteration-count: 20000000;
	  box-shadow: 0 0 0 1em transparent;
	}
	
	@-webkit-keyframes pulse {
	  0% {
	    box-shadow: 0 0 0 0 var(--hover);
	  }
	}
	
	@keyframes pulse {
	  0% {
	    box-shadow: 0 0 0 0 var(--hover);
	  }
	}
	
	.pulse {
	  --color: #ef6eae;
	  --hover: #089CCE;
	}



/* Buttons right */

.section-antidote::before {
	background: -webkit-linear-gradient(135deg, hsla(213, 91%, 47%, 1) 0%, hsla(160, 100%, 48%, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-color: white;
	}

.section-antidote p, .section-btn p {
	font-weight: 600;
	}

.section-antidote:hover {
	background: -webkit-linear-gradient(135deg, hsla(213, 91%, 47%, 1) 0%, hsla(160, 100%, 48%, 1) 100%);
	}
	
.section-antidote:hover h6, .section-antidote:hover p {
	color: white !important;
	-webkit-text-fill-color: white;
	}
	
.section-btn {

	}
	
.section-btn:hover {
	background-color: #446793 !important;
	color: white;
	}





.modal_news_fonts {
	font-family: "Roboto", sans-serif;
	}
	
.modal_news_fonts h1 {
	font-family: "Roboto", sans-serif;
	font-size: 3em;
	}
	
.modal_news_fonts h5 {
	font-family: "Roboto", sans-serif;
	/* 	font-size: calc(12px + 2vh); */
	font-size: clamp(1.5rem, 5vw - 2rem, 1.833rem);
	font-weight: 500;
	letter-spacing: 0.0rem;
	line-height: 110%;
	}
	
.modal_news_fonts h6 {
	font-family: "Roboto", sans-serif;
	/* 	font-size: calc(12px + 2vh); */
	font-size: clamp(1.167rem, 4vw - 2rem, 1.233rem);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.0rem;
	}
	
.modal_news_fonts p.lead {
	font-size: 1.2rem;
	line-height: 1.8rem;
	font-weight: 300 !important;
	}
	
.modal_news_fonts p {
	font-size: 1.1rem;
	line-height: 1.8rem;
	font-weight: 300 !important;
	}

.modal_news_fonts {
	font-size: 1rem;
	line-height: 1.8rem;
	}
	
.modal_news_fonts blockquote {
	padding: 10px 0 10px 10px;
	color: #808080 ;
/* 	background-color: #f9f9f9; */
	border-left: 4px solid #9EC4FE;
	border-radius: 0px;
/* 	box-shadow: 0px 10px 10px -3px rgba(0,0,0,0.1); */
	}
	
.modal_news_fonts blockquote p {
	font-size: 1.1rem !important;
	line-height: 1.8rem !important;
	font-style: italic;
	text-align: justify;
	padding-left: 10px;
	margin-top: -40px;
	}

.modal_news_fonts blockquote .blockquote-footer {
	font-size: 1.1rem !important;
	font-weight: 800;
	line-height: 1.8rem !important;
	font-style: italic;
	text-align: justify;
	padding-left: 10px;
	
}

.modal_news_fonts blockquote .blockquote-footer::before {
    content: "| ";
}

.modal_news_fonts blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: bold;
  color: #999;
  
  /*Positioning*/
  position: relative;
  left: -40px;
  top:0px;
  visibility: hidden !important;
}

.modal_news_fonts blockquote::after{
  /*Reset to make sure*/
  content: "";
}


.border-cornflower {
    --bs-border-opacity: 1;
    border-color: #ffacac !important;
}
.border-flesh {
    --bs-border-opacity: 1;
    border-color: #ffd5a5 !important;
}
.border-portafino {
    --bs-border-opacity: 1;
    border-color: #fdffb6 !important;
}
.border-snowFlurry {
    --bs-border-opacity: 1;
    border-color: #cbffbf !important;
}
.border-anakiwa {
    --bs-border-opacity: 1;
    border-color: #9bf6ff !important;
}
.border-anakiwa2 {
    --bs-border-opacity: 1;
    border-color: #9ec4fe !important;
}
.border-melrose {
    --bs-border-opacity: 1;
    border-color: #bdb2ff !important;
}
.border-pinkLace {
    --bs-border-opacity: 1;
    border-color: #ffc6ff !important;
}
.border-blackWhite {
    --bs-border-opacity: 1;
    border-color: #fffffc !important;
}
.border-pictonBlue {
    --bs-border-opacity: 1;
    border-color: #5ba9e6 !important;
}

:root, .lgbtq-pastels {
    --cornflowerLilac: #ffacac;
    --flesh: #ffd5a5;
    --portafino: #fdffb6;
    --snowFlurry: #cbffbf;
    --anakiwa: #9bf6ff;
    --anakiwa2: #9ec4fe;
    --melrose: #bdb2ff;
    --pinkLace: #ffc6ff;
    --blackWhite: #fffffc;
    --pictonBlue: #5ba9e6;
}

@supports (color: color(display-p3 1 1 1)) {
    :root, .lgbtq-pastels {
        --cornflowerLilac: color(display-p3 1.0 0.676 0.675 / 1.0);
        --flesh: color(display-p3 0.999 0.837 0.646 / 1.0);
        --portafino: color(display-p3 0.99 1.0 0.714 / 1.0);
        --snowFlurry: color(display-p3 0.794 0.998 0.75 / 1.0);
        --anakiwa: color(display-p3 0.608 0.966 0.999 / 1.0);
        --anakiwa2: color(display-p3 0.622 0.769 0.995 / 1.0);
        --melrose: color(display-p3 0.741 0.697 1.0 / 1.0);
        --pinkLace: color(display-p3 0.999 0.776 0.998 / 1.0);
        --blackWhite: color(display-p3 1.0 1.0 0.987 / 1.0);
        --pictonBlue: color(display-p3 0.356 0.662 0.903 / 1.0);
    }
}