/*
	/*background-image:url('../images/bg_logo_k.svg');
	background-repeat:no-repeat;*/
	/*Jaune Benoît :) */
	/*
	Gris clair eae8e6
	Gris sombre 5c5c5c
	Bleu Electrique 4230E5
	Rosée FFCFF3
	Crépuscule Orange FFA757
	Nuit 201b8C
	Red dc3545
	Vert 48BC69 // canva benoit 00bf63
	Brume ECEBFC
	
	pinkHighlightBox
	pinkHighlightBoxNuit600
	*/

@import url("https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,700|Source+Sans+Pro:400,600");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
body {
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
	max-width:1500px;
}

p {
  font-family: "Montserrat", sans-serif;
  color: #5c5c5c;
  font-size: 1em;
}
h6 {font-size: 1.2em;color:#5c5c5c}
h1, h2, h3, h4, h5, h6 {
	font-family: "Outfit", sans-serif;
	color:#201B8C
}

.no-padding {
  padding: 0 !important;
}

.inline-block {
  display: inline-block;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {color:#5c5c5c}

figure {
  margin: 0;
}

a {
  transition: all 0.3s ease-in 0s;
}

iframe {
  border: 0;
}


.btn-main {
  background: #28ABE3;
  border: 1px solid #28ABE3;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 12px 40px;
  text-transform: uppercase;
  border-radius: 40px;
}
.btn-main:hover {
  color: #fff;
}

.btn-transparent {
  color: #fff;
  border: 1px solid #fff;
  display: inline-block;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 14px 35px;
  text-transform: uppercase;
  border-radius: 40px;
}
.btn-transparent:hover {
  color: #fff;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.section {
  padding: 100px 0;
}

.btn:focus {
  color: #ddd;
}

#home {
  position: relative;
}

.section {
  padding: 100px 0;
}

.section-sm {
  padding: 70px 0;
}

.section-xs {
  padding: 40px 0;
}
/*
#preloader {
  background: #fff;
  height: 100%;
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 999999999;
}

.btn.active:focus, .btn:active:focus, .btn:focus {
  outline: 0;
}

.parallax-section {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.preloader {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  position: absolute;
}

.preloader span {
  position: absolute;
  display: block;
  bottom: 0;
  width: 9px;
  height: 5px;
  border-radius: 5px;
  background: #fff;
  -webkit-animation: preloader 2s infinite ease-in-out;
  animation: preloader 2s infinite ease-in-out;
}

.preloader span:nth-child(2) {
  left: 11px;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.preloader span:nth-child(3) {
  left: 22px;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

.preloader span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}

.preloader span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}

.preloader span:nth-child(6) {
  left: 55px;
  -webkit-animation-delay: 1000ms;
  animation-delay: 1000ms;
}
*/
@-webkit-keyframes preloader {
  0% {
    height: 5px;
    transform: translateY(0);
    background: rgba(0, 0, 0, 0.1);
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background: #28ABE3;
  }
  50%, 100% {
    height: 5px;
    transform: translateY(0);
    background: rgba(0, 0, 0, 0.1);
  }
}
@keyframes preloader {
  0% {
    height: 5px;
    transform: translateY(0);
    background: #fff;
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background: #3498db;
  }
  50%, 100% {
    height: 5px;
    transform: translateY(0);
    background: #fff;
  }
}
.title {
  padding-bottom: 50px;
  overflow: hidden;
}
.title h2 {
  font-weight: 600;
  font-size: 35px;
  color: #232323;
}
.title p {
  color: #848484;
  margin: 0 auto;
}
.title.title-white h2 {
  color: #fff;
}

.border {
  height: 2px;
  margin: 20px auto 20px;
  position: relative;
  width: 80px;
  background: #28ABE3;
}

.bg-gray {
  background: #f9f9f9;
}

.bg-white {
  background: #ffffff;
}

.header-bradcrumb {
  background: transparent;
}
.header-bradcrumb a, .header-bradcrumb .active {
  color: #cfcfcf;
  font-weight: 200;
  font-family: "Source Sans Pro", sans-serif;
}
.header-bradcrumb a:hover {
  color: #28ABE3;
}

.colors-switcher {
  width: 100px;
  padding: 20px 18px 14px 20px;
  position: fixed;
  z-index: 9;
  top: 90px;
  right: 0;
  background-color: #fff;
  border-radius: 2px 0 0 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease-in-out;
}
.colors-switcher #show-panel {
  position: absolute;
  left: -38px;
  top: 15px;
  width: 38px;
  height: 38px;
  z-index: 9;
  display: block;
  background-color: #fff;
  border-radius: 2px 0 0 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-right: none;
  cursor: pointer;
}
.colors-switcher #show-panel i {
  color: #3D3D3D;
  font-size: 20px;
  line-height: 38px;
  margin-left: 10px;
}

.colors-list {
  margin: 0;
  padding: 0;
}
.colors-list li {
  display: inline-block;
  margin-bottom: 2px;
  margin-right: 4px;
}
.colors-list li a {
  text-align: center;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  cursor: pointer;
}

.colors-switcher .colors-list a.light-red {
  background-color: #FF432E;
}

.colors-switcher .colors-list li a:hover {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

.colors-switcher .colors-list a.light-red {
  background-color: #FF432E;
}

.colors-switcher .colors-list a.blue {
  background-color: #28ABE3;
}

.colors-switcher .colors-list a.light-blue {
  background-color: #69D2E7;
}

.colors-switcher .colors-list a.green {
  background-color: #5BB12F;
}

.colors-switcher .colors-list a.light-green {
  background-color: #BCCF02;
}

.colors-switcher .colors-list a.yellow {
  background-color: #FED136;
}

.slick-slide {
  outline: none;
}

.logo {
  display: inline-block;
}

.single-page-header {
  background-image: url("../images/about/about-header.jpg");
  background-size: cover;
  padding: 140px 0 70px;
  text-align: center;
  color: #fff;
  position: relative;
}
.single-page-header:before {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

/*# sourceMappingURL=style.css.map */

/*==================================================================================================================*/
/*Sidrik Blal modifications and additions*/

/* Bleu du site #27ABE3 */
.textEmphasis {
	font-weight:bolder;
	color: #28ABE3;
}
.lightBG {
	padding: 57px 0 70px;
	background:rgba(0,0,0,0.05);
}
/*button with icons*/
.btn-label {
	position: relative;
	left: -12px;
	display: inline-block;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px 0 0 3px;
}
.btn-labeled {
	padding-top: 0;
	padding-bottom: 0;
}
.btn {margin-bottom: 10px;}
/*modals*/
.modal-header{background-color:#fff;color:#017aff}
.modal-title {color:#201b8c}
.modal-content {/*border-bottom-left-radius: 35px;border-top-right-radius: 35px;*/}
.modal-header {/*border-top-right-radius: 35px;*/}

.alert-fixed {
    position:fixed; 
		height:90px;
		border-radius:10px;
		line-height:66px;
    z-index:9999; 
		width:40%;
		right:30%;
}
#profileUpdated-alert {background:hsl(0 0% 100% / 85%);}

.mb-5 {
    margin-bottom: 1.5rem!important;
}
.modal-fullscreen {
    width: 100vw!important;
    max-width: none!important;
    height: 100%!important;
    margin: 0!important;
}
.servicesList{
	text-align:left;margin-left:20px;column-count:3
}
.easeload{
    opacity: 0;
    -webkit-transition: all 2s ease; 
    -moz-transition: all 2s ease; 
    -ms-transition: all 2s ease; 
    -o-transition: all 2s ease;
		max-width:450px
}
.siteNotification {top:20%}
.groupLabels {font-weight:500;}
.groupLabelsTitle {margin-left:-5px !important;padding:0!important}
.loginSubTitle {text-align:center;margin-bottom:60px;font-weight:400!important}
.loginSubTitle a {font-weight:600}
.containerMS{max-width: 900px;margin: auto;}
@media (max-width: 767px) {
	#loginFormContainer{background-color:tranparent!important;padding: 10px;}
	#loginForm{background-color:tranparent!important;width:96%;padding-top: 0 !important;margin-top: 15% !important;}
	.loginTitle {color:white;text-align:center;}
	.loginSubTitle {color:white;text-align:center;margin-bottom:60px;font-weight:400!important}
	.loginSubTitle a {font-weight:600}
	#loginForm h2 {font-weight:300}
	#loginForm input {border-radius:6px;width:100%}
	#loginButton {width:100%;border-radius:6px;padding: 1rem .75rem;}
	#loginButton .btn-label {display:none}
	.loginPage > .navigation {display:none}
	#loginLogo {padding-top:85px;}
	#loginLogo a {z-index:1;text-align:center;margin-top:85px;}
	#loginForm > .text-secondary {color:white!important;}
	.alert-fixed {width:80%;right:10%;line-height:56px}
	.loginSubTitle a {color:white}
	.siteNotification {top:20%}
	.container {max-width:100%}
	.servicesList{column-count:2}
	.pricingImage{width:80%}
	.easeload{max-width:60%;margin-top:30%}
	
}
@media (max-width: 991px) {
	.container {max-width:100%}
	#navigation > ul {background:white}
	#loginForm {border-radius:20px;margin-top:15%;}
	.card-deck {display: block!important;}
	.sticky-header .logo-default {display: none;}
	header > .container{padding:0;}
	.blueNavbar {background:#33AFEA!important}
	.navbar-nav {background:#fff!important;height:50vh}
	.nav-link {text-transform:none!important;}
	header .nav-item {padding-bottom:5px!important}
}
@media (min-width: 991px) {
	.lightBG {padding: 82px 0 70px}
	.easeload{max-width:400px;margin-top:200px}
	#loginForm {border-radius:20px;margin-top:10%;}
  body, .navigation, .bottomMenu {
		/*max-width: 1366px;*/
		margin: auto;
	}
	.container {
		max-width: 1500px;
	}
	
}

.navigation .navbar-collapse.show {
		overflow-y: none;
		height:100%!important;
		/*max-height: calc(100vh - 161px);*/
		
		/*box-shadow:0px -2px 15px rgba(185, 177, 177, 0.8);
		border-top-left-radius:25px;
		border-bottom-left-radius:25px;*/
	}
@media (min-width: 992px) {
	.navbar-expand-lg .navbar-toggler {
		display: block;
	}
	.navigation .navbar-collapse.show {
		overflow-y: none;
		/*max-height: calc(100vh - 161px);*/
		height:100%!important
	}
	.navbar-expand-lg .navbar-collapse {
		display: block !important;
		flex-basis: auto;
	}
	.navbar-expand-lg .navbar-nav {
		flex-direction: column;
	}
}
@media (min-width: 768px) {
	#loginFormContainer{}
	#loginForm{padding:40px 100px 40px 100px;width:600px}
	#loginLogo img {/*display:none*/}
	#loginLogo {padding-top:85px;background-color: rgba(0, 0, 0, 0.3);}
	#loginLogo a {z-index:1;text-align:center;margin-top:85px;}
	#loginForm button {width:100%;}
	.pricingImage{width:80%;max-width:600px}
	.col-md-6 {
    /*margin-left: 25%!important;*/
  }
}
.homeSplash {
	background: #2193b0;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
	.loginSSO {color:white;text-align:center;margin:25px 0 25px 0;font-weight:400}
	.fullpageSBL {
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		position: relative;
		background-image: url("../images/slider/slider-bg-1.jpg");
		background-size: cover;
		height: 100vh;
		position: relative;
		display: flex;
		justify-content: center;
	}
.separator {
  display: flex;
  align-items: center;
  text-align: center;
	color:white
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid white;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
	outline: none;
	border: none;
	box-shadow: none;
}


.bottomMenuLink{color:#697B89;padding: 8px 2px;color:#000; touch-action: manipulation;}
.bottomMenuIcon{padding-bottom:6px;width:24px}
.sticky-header{background:transparent;box-shadow:0 0 0 0}
.menuOnScroll{box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);background: white;}

.underMapSection {
	  padding: 20px;
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-top: -30px;
    display: flex;
    flex-flow: column;
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-    input:focus {
    border-color: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color yellow 5px;
}

/* Bleu du site #27ABE3 */

.invalid-input {
    border-color: var(--errorColor);
		border:1px solid red!important;
}
.card-deck > .card {border-radius:20px}
.card-deck > .card > .card-header {border-top-left-radius:20px;border-top-right-radius:20px;color: white;}
.card-deck  > .card > .extended {background: #ABB6EB;border-color:#ABB6EB}
.card-deck  > .card > .extensive {background: #4CB992;border-color:#4CB992}
.card-deck  > .card > .daily {background: #3599E1;border-color:#3599E1}

.btn-extended{border:1px solid #ABB6EB;color:#ABB6EB}
.btn-extended:hover {background:#ABB6EB;color:#fff}
.extendedActive {background:#ABB6EB;color:#fff}
.extendedOpacity{opacity:0.2}

.btn-extensive:hover {background:#4CB992;color:#fff}
.extensiveActive {background:#4CB992;color:#fff!important}
.btn-extensive{border:1px solid #4CB992;color:#4CB992}
.extensiveOpacity{opacity:0.2}

.btn-daily:hover {background:#3599E1;color:#fff}
.dailyActive{background:#3599E1;color:#fff!important}
.btn-daily{border:1px solid #3599E1;color:#3599E1}
.dailyOpacity{opacity:0.2}

/* Splash, index, login register screens */
.homeSplashWhite label div {
	width: 6px;
	height: 6px;
	background-color: #ccc;
	margin-left: 0;
	margin-bottom: 6px;
	border-radius: 4px;
	margin:0 3px;
}
.homeSplashWhite label div.inline { display:inline-block}
.appPage {position: fixed; bottom: 30px;left:0;width:100%;/*max-width:1296px*/}

.generalProfile {padding-left:24px;text-transform:capitalize}
.card {border-radius:20px}

.fixed-bottom {z-index:999!important}

h3[aria-expanded=false] .expandIcon {
  transform: rotate(0deg);
}

h3[aria-expanded=true] .expandIcon {
  transform: rotate(180deg);
}
.askedPriceInputCYO {display:none}

#burgerButton.click span:before {
        content: '\f00d';
        /* cross icon */
    }




  main {
    padding-left: 240px;
  }

  /* Background color for demos to provide a contrast */

  .bg-grey {
    background: #E1E1E1;
  }

  /*Animated icons*/
  /* Icon 1 */

  .animated-icon1 {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }

  .animated-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

  .animated-icon1 span {
    background: #33AFEA;
  }


  .animated-icon1 span:nth-child(1) {
    top: 0px;
  }

  .animated-icon1 span:nth-child(2) {
    top: 10px;
  }

  .animated-icon1 span:nth-child(3) {
    top: 20px;
  }

  .animated-icon1.open span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  .animated-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }

  .animated-icon1.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
.navigation .dropdown-menu {
	background:#33AFEA!important;
}
.pChoice {
	margin: 20px 0 40px 0;
	border-radius: 15px;
	color: #201B8C;
	font-weight: 600;

}
.angelChoice {/*background: #F55E5D;*/}
.userChoiceLink {
    background: #3b444f;
    border-radius: 30px;
    padding: 10px;
		margin:5px
}
.serviceChoiceCard{
	background:#fff;
	color: #201B8C;
	border:1px solid #201B8C;
	border-radius: 10px;
	padding: 10px;
	margin: 5px;
	text-align: center !important;
}
.ddepChoiceCard{
	background:#fff;
	color: #201B8C;
	border:1px solid #201B8C;
	border-radius: 10px;
	padding: 5px;
	margin: 5px;
	text-align: center !important;
	position:relative
}
.ddep-iconHolder {
	background:#201B8C;
	position: absolute;
	width:44px;
	height:44px;
	top:0;
	left:-1px;
	border-radius:10px;
	}
.serviceChoiceCardThird{
	flex: 1 1 calc(33.333% - 20px);
	margin: 10px;
	box-sizing: border-box;
	max-width: calc(33.333%);margin:3px;
}
.service-iconHolder {
	background:#201B8C;
	position: absolute;
	width:44px;
	height:44px;
	top:0;
	left:-1px;
	border-radius:10px;
	}
.selectedIcon {background:#4230E5;}
.ddep-iconHolder {
	background:#201B8C;
	position: absolute;
	width:44px;
	height:44px;
	top:0;
	left:-1px;
	border-radius:10px;
	}
.service-icon {
	position: absolute;
	left: 12px;
	top: 12px;
	width:20px
}
.ddep-icon {
	position: absolute;
	left: 13px;
	top: 12px;
	width:20px
}
.checked {
  background-color: #ECEBFC;
}

.checked .checked-icon {
  display: block;
}

.form-check-input:checked {background-color:#4230E5;border-color:#4230E5}
input:focus{border-color:#4230E5}
/* Toggle switch Pour Moi // Pour un Proche */
.toggle-container {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.switch {
position: relative;
display: inline-block;
width: 54px;
height: 28px;
margin: 0 10px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #4230E5;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}

input:checked + .slider {
background-color: #4230E5;
}

input:checked + .slider:before {
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}
.serviceChoiceCard {
    position: relative;
    
}

.checkmark {
    position: absolute;
    top: 9px;
    right: 10px;
    font-size: 1.4em;
    color: #4230E5;
    display: none; /* Initially hidden */
}

.serviceChoiceCard.selected .checkmark {
    display: block; /* Show checkmark when the card is selected */
}
.selection-card {
    cursor: pointer;
    transition: transform 0.2s;
}



.selection-card.selected {
    border: 0px solid #4230E5; /* Highlight selected card */
}
.grannycard {width:100%;border-radius:10px;    background: transparent}
.grannycardBody {padding:5px}
/*.invalid-feedback {
    color: #dc3545;
    display: block; 
}
.is-invalid {
    border-color: #dc3545;
		border: 1px solid #dc3545;
}*/
.grannyLogoTopRight{
	max-width:170px;margin-top:0px
}
.grannyAppPage{
	position: relative;
	overflow: auto;
	background:#fff;
	padding: 100px 0px 150px 0px;
	/*background-image:url('../images/bg_logo_k.svg');
	background-repeat:no-repeat;*/
	/*Jaune Benoît :) */
	/*
	Gris clair eae8e6
	Gris sombre 5c5c5c
	Bleu Electrique 4230E5
	Rosée FFCFF3
	Crépuscule Orange FFA757
	Nuit 201b8C
	Vert 48BC69
	Brume ECEBFC
	
	*/
}
.astuceTarifaire {
	background-color: #FFCFF3; /* Light pink background */
	color: #201b8C;
	border-radius: 12px;
	padding:5px;
}
.match-label {
	background-color: #FFCFF3; /* Light pink background */
	color: #201b8C; /* Dark purple text color */
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 0.7em;
	position: relative;
	top: -8px; /* Position it slightly below the image */
	left: 50%;
	transform: translateX(-50%);
	max-width:110px;
}
.match-labelInline {
	background-color: #FFCFF3; /* Light pink background */
	color: #201b8C; /* Dark purple text color */
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 0.7em;
	position: relative;
	transform: translateX(-50%);
	max-width:110px;
	
}
a, a:focus, a:hover {
  text-decoration: none;
  outline: 0;
}
a:focus, a:hover {
  color: #4230E5;
}
a {color:#4230E5;font-weight:500}
a.greyLink {color:#5c5c5c;border-bottom:1px solid #5c5c5c;font-weight:300}
a.nuit {color:#201b8C!important;font-weight:500}
a.whiteLink {color:#fff;font-weight:500}
a.whiteLink:hover {text-decoration:underline}


.btnGrannyWay {
	  --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
		border-radius:20px /* 02.12.2024 */
}
.btnGrannyWay.selected {
	background-color: #4230E5; /* Change to desired color */
	color: #fff;
}
.ddepChoiceCard.selectedDDEP {
	background-color: #4230E5; /* Change to desired color */
	color: #fff;
}
.ddepChoiceCard.selectedDDEP p {
	color: #fff;
}
.modal-header {border-radius: 20px;border: 0;}
.modal-content {border-radius: 20px;border:1px solid #FFCFF3}
.modal-body {padding:1rem;padding-bottom:1rem;margin: auto;}
.btn-close {}
.btn-inRequestCard {border-radius: 20px;margin: auto;padding:4px 10px!important}
.smallerKoappyText {font-size:0.9em!important}
.boutonPink {border:1px solid #FFCFF3!important;color:#201b8C!important;background:#FFCFF3!important;border-radius:20px;font-weight:600}
.btn-grannyNext{border:1px solid #4230E5;color:#fff;background:#4230E5;width:140px;border-radius:20px;font-weight:600}
.btn-grannyPrev{border:1px solid #4230E5;color:#4230E5;background:#ECEBFC;width:140px;border-radius:20px;font-weight:600}
.btn-grannyGreen{border:1px solid #48BC69;color:#fff;background:#48BC69;width:140px;border-radius:20px;font-weight:600}
.btn-grannyGreenOutiline{border:1px solid #48BC69;color:#48BC69;background:#fff;border-radius:20px;font-weight:600}
.btn-grannyGreenWidth{border:1px solid #48BC69;color:#fff;background:#48BC69;border-radius:20px;font-weight:600}
.btn-grannyNuitWidth{border:1px solid #201b8c;color:#fff;background:#201b8c;border-radius:20px;font-weight:600}
.btn-grannyNuitWidth:hover{border:1px solid #201b8c;color:#201b8c;background:#fff;border-radius:20px;font-weight:600}
.pinkHighlightBox {padding: 4px;padding-top:2px;border-radius: 5px;background: #FFCFF3;}
.pinkHighlightBoxNuit600 {padding: 4px;padding-top:2px;border-radius: 5px;background: #FFCFF3;font-weight:600!important;color:#201b8C;}
.smallServiceChoiceCard{color:#fff;margin-top:30px}
.blueGrannyBG {background:#4230E5;}
.electricGrannyBG {background:#4230E5;}
.nuitGrannyBG {background:#201b8C;}
.nuitGrannyOutline {border:1px solid #201b8C;}
.greenGrannyBG {background:#48BC69!important;}
.greenGrannyOutline {border:1px solid #48BC69!important;background:#fff!important;color:#48BC69!important;}
.redGrannyOutline {border:1px solid #dc3545!important;background:#fff!important;color:#dc3545!important;}
.pinkGrannyBG {background:#FFCFF3!important;}
.redGrannyBG {background:#dc3545!important;}
.brumeGrannyBG {background:#ECEBFC!important;}
.orangeGrannyBG {background:#FFA757!important;}
.blueGrannyText {color:#4230E5!important;}
.granny500Text {font-weight:500!important}
.granny600Text {font-weight:600!important}
.nuitGrannyText {color:#201b8C;}
.greenGrannyText {color:#48BC69;}
.pinkGrannyText {color:#f9cff4;}
.orangeGrannyText {color:#ffa757;}
.redGrannyText {color:#dc3545;}
.stripeLogo {color:#6872E5;font-weight:900}
.btn-granny {border:1px solid #4230E5;background:#4230E5;color:white!important}
.btn-grannyPink {border:1px solid #FFCFF3;background:#FFCFF3;color:#4230E5!important;font-weight:500}
.btn-grannyRounded {border:1px solid #4230E5;background:#4230E5;color:white!important;border-radius:20px;}
.btn-grannyRoundedOutline {border:1px solid #4230E5;background:#fff;color:#201b8C!important;border-radius:20px;}
.btn-grannyChoice {border:1px solid #4230E5;color:#4230E5;background:#ECEBFC;width:100%;border-radius:20px;font-weight:600}
.btn-grannyTransparent {border:0;color:#4230E5;background:transparent}
.btn-grannyOutline {border:1px solid #4230E5;background:transparent;color:#4230E5!important}
.btn-grannyOutlineNuit {border:1px solid #201b8C;background:transparent;color:#201b8C!important}
.btn-grannyRoundedBrume {border:1px solid #ECEBFC;background:#ECEBFC;color:#5c5c5c!important}
.btn-grannyOrange {background:#FFA757;border:0;color:white!important}
.btn-grannyOrangeOutline {border:1px solid #FFA757;color:#FFA757;!important}
.btn-grannyVert {background:#48BC69;border:0;color:white!important}
.btn-grannyW {background:#4230E5;color:white!important}
.btn-grannyWB {border:1px solid white}
.btn-grannyG {background:#93cba6;color:white!important}
.btn-grannyT {background:transparent;border:1px solid white;color:white!important}
.btn-grannyDanger {color:#fff;background:#FA7474ff;border:0;}
.btn-granny-secondary{background:transparent;color:#5c5c5c;border:1px solid #5c5c5c}
.display-6-sm{font-size: calc(1rem);font-weight: 300;line-height: 1.2;display: block;padding-top: 3px;}
.userProfilePhoto {/*border:1px solid #eae8e6; */border-radius:50%;width:100px;height:100px}
.menuOnScroll {background:#4230E5;Background:#fff}
body{overflow-x: hidden;touch-action: manipulation; /* Prevents horizontal overflow */}
.sticky-header{background:white}
.angelBG {background:#5c5c5c}
.textGrannyGrey{color:#5c5c5c}
.linkUnderlinedGrannyGrey{color:#5c5c5c;border-bottom:1px solid #5c5c5c60}
.grannyGrey{color:#5c5c5c}
.textGrannyYellow{color:#4230E5}
.grannyLink{color:#5c5c5c;font-weight:600}
.grannyLinkW{color:#fff; border-bottom: 1px solid #ffffff60!important;}
.grannyLinkWBG{background:#fff!important; border-radius:10px;padding:5px;color:#5c5c5c}
.grannyLinkW:hover{color:#fff;font-weight:600;}
.grannyLinkWNB{color:#fff;}
.grannyRed {color:#FA7474ff}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {background-color: #b5b7b6;}
.fieldOblig {color:red}
/*.bottomLinkCard {position:absolute!important; bottom:10px!important;right:20px}*/
.phIcon {position:relative;top:2px!important}
.ph {position:relative;top:2px}
.ph-fill {position:relative;top:2px}
.timer-card {
	width: 100%; /* you can adjust this to control the size */
	max-width: 340px; /* limit the maximum width */
	display: flex;
	justify-content: center;
	align-items: center;
	border:0;
	margin: 0 auto; /* center the card horizontally */
}
.userMessagesListItem {margin-bottom:5px;}
.koappyCCClass {
	/*border-color:#4230e5!important;*/
}
	
.timer-card-content {
	text-align: center;
		}
.radio-container {
	display: flex;
	justify-content: center;
	gap: 20px; /* Adjust spacing between the options */
}
.radio-containerInscrip {
	display:block;
	justify-content: center;
	gap: 20px; /* Adjust spacing between the options */
}
/* Style the unread badge */
.badge {
    position: absolute;
    top: 5px;   /* Adjust vertical position above the icon */
    left: 65%;    /* Move the badge to the horizontal center */
    transform: translateX(-50%);  /* Center the badge horizontally */
    color: #201b8c;
		width: 20px; /* Set width and height for a perfect circle */
    height: 20px;
		background:#ffcff3;
    border-radius: 50%;
    padding: 5px 5px;
    font-size: 0.8em;
		font-weight:600;
    display: none;  /* Hide the badge initially */
}
.radioContainerDiv {
	border: 1px solid #ECEBFC;
	border-radius: 8px;
	background: #fff;
	width: 150px; /* Fixed width for consistent sizing */
	padding: 10px;
	position: relative;
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s;
	text-align: left; /* Align text to the left */
}

.radioContainerDiv input[type="radio"] {
	position: absolute;
	top: 16px;
	right: 10px;
	cursor: pointer;
	transform: scale(1); /* Make the radio button larger */
}

.radioContainerDiv label {
	display: block;
	font-size: 0.7em;
	color: #666;
	font-weight:500;
	margin-bottom: 0;
}

.radioContainerDiv label span {
	display: block;
	font-size: 1.2em;
	color: #201b8C;
	font-weight:600;
}

.radioContainerDiv.selected {
	border-color: #4230E5;
	background-color: #ECEBFC;
}

.radioContainerDiv:hover {
	background-color: #f3f1ff;
}/* Top and Bottom Section Styling */
.grannyTopSection {
	 background-color: #fff;
		width: 100%;
		/*height: 50vh; /* Set to 50% of viewport height */
		text-align: center;
		margin-top: 38px;
		position: relative;
    top: 0;
		min-height:35vh
}
.grannyBottomSection {
		/*height: 100vh;*/
		background-color: #ECEBFC;
		padding: 0px 0px;
		width: 100%;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
		margin-top: -30px;
		padding-bottom:130px;
		min-height: 65vh;
}
.form-controlSelectGranny {
		appearance: none; /* Remove default styling for select */
		width: 100%;
		padding: 12px;
		border: 1px solid #ECEBFC;
		border-radius: 5px;
		font-size: 16px;
		color: #201B8C;
		font-weight: bold;
		background-color: #fff;
		background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%234A3AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E');
		background-repeat: no-repeat;
		background-position: right 10px center;
		background-size: 16px;
	}
	.form-controlSelectGranny:focus {
		border-color: #ECEBFC;
		color: #201B8C;
		outline: none;
	}
.inter-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 6px;
	border: 1px solid #ddd;
	border-radius: 15px;
	margin: 5px;
	cursor: pointer;
	background:#ecebfc;
	color:#201b8c
}
.lang-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 6px;
	border: 1px solid #ddd;
	border-radius: 15px;
	margin: 5px;
	cursor: pointer;
	background:#ecebfc;
	color:#201b8c
}
.progress {
		position: relative;
		height:2px;
		background: #ECEBFC;
	}

	.progress-bar {
		height: 2px;
		background-color: #4A3AFF;
		width: 0%; /* Start at 0% and control it via JavaScript */
		transition: width 0.4s ease; /* Smooth transition for width */
		border-radius:2px
	}

	/* Add markers for 4 steps */
	.progress::before,
	.progress::after,
	.progress .marker-20,
	.progress .marker-33,
	.progress .marker-40,
	.progress .marker-60,
	.progress .marker-66,
	.progress .marker-80
	{
		content: '';
		position: absolute;
		top: -1px;
		height: 4px;
		width: 8px;
		/*background-color: #fff;*/
	}

	/* Position markers for each step */
	.progress .marker-20 {
		left: 20%;
	}
	.progress .marker-33 {
		left: 33.33333333%;
	}
	.progress .marker-40 {
		left: 40%;
	}
	.progress .marker-60 {
		left: 60%;
	}
	.progress .marker-66 {
		left: 66.66666666%;
	}
	.progress .marker-80 {
		left: 80%;
	}

#timer-display {font-size:3em;}
/*10 services icons*/
.service-item {
    margin: 15px; /* Space between circles */
    flex: 1 0 100px; /* Basis of 150px, and the flex property allows shrinking */
    max-width: 100px; /* Ensure each item doesn’t exceed its intended size */
    text-align: center; /* Centers the text under the circle */
}

.service-circle {
    width: 80px;
    height: 80px;
    background-color: #f0f0f045;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    position: relative;
    cursor: pointer;
}

.service-circle img {
    max-width: 50%;
    max-height: 50%;
}

.service-tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    display: none;
    width: 200px;
    text-align: center;
    z-index: 10;
}

.service-circle:hover .service-tooltip {
    display: block;
		
}
.serviceToltip {
         display: none;
         background-color: yellow;
         color: black;
         position: absolute;
      }
			
			
					*, *:after, *:before {
  box-sizing: border-box;
}
.multigraph {
  width: 100%;
  height: 65px;
  position: relative;
}
.multigraph:before {
  content: '';
  width: 90px;
  height: 45px;
  position: absolute;
  border: 15px solid rgba(0,0,0,0.1);
  border-radius: 90px 90px 0 0;
  border-bottom: none;
}
.multigraph:hover .tooltip {
  bottom: 75%;
  opacity: .8;
  transform: scale(1);
}
.graph {
  width: 90px;
  height: 45px;
  position: absolute;
  overflow:hidden;

}
.graph:before, .graph:after {
  width: 90px;
  height: 45px;
  position: absolute;
  top: 100%;
  border: 15px solid #4230E5;
  content: '';
  border-radius:0 0 90px 90px;
  border-top: none;
  animation: demo 1s;
  transform-origin: center top;
}


@keyframes demo {
  0% { transform: rotate(0deg) }
  50% { transform: rotate(180deg) }
}
.appCards {
	width: 98%;
  margin: 0 1%;
}
/* Custom styles for best match cards */
.best-match-card {
    border: 2px solid green;  /* Green border for best match */
    background-color: #f0fff0;  /* Light green background */
}
.darkerImage {filter: brightness(50%);}

.nav-item {font-size:1em}
.bottomMenu > .nav-item  {font-size:1.1em}
.userChoiceLink, .angelChoiceLink {
    background: #fbd0f3; /* For userChoiceLink */
    border-radius: 30px;
    padding: 20px;
    text-align: left;
    color: #4230E5;
		width:150px;
    min-height: 150px; /* Ensures both divs stretch equally */
}
.userChoiceLink h6 {color: #4230E5;}
.userChoiceLink .ph-light {font-size: 50px;}
.angelChoiceLink h6 {color: #4230E5;}


/* Adjust spacing for small screens */
@media (max-width: 768px) {
    .userChoiceLink, .angelChoiceLink {
        margin-bottom: 20px;
    }
}
/*
* {
	-webkit-user-select: none; 
	-moz-user-select: none;    
	-ms-user-select: none;     
	user-select: none;         
}
 input, input:before, input:after {
      -webkit-user-select: initial;
      -khtml-user-select: initial;
      -moz-user-select: initial;
      -ms-user-select: initial;
      user-select: initial;
     } */
.modalGrannyHeader {
	border-top-left-radius:20px!important;
	border-top-right-radius:20px!important;
}
.modalGranny {border-radius:20px!important}
.serviceRequestItem {padding-bottom:1rem;border-bottom:1px solid #eae8e6}
.grannyIconsAccepted{color:#53D7ACff}
.grannyIconsPending{color:#4230E5}
.grannyIconsRefuse{color:#FA7474ff}

/* Main card container */
.flip-card {
    perspective: 1500px;
    position: relative;
    width: 100%; /* Make the card fill the container width */
		min-height: 160px;
}

/* Inner content of the flip card */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Front and back of the card */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%; /* Make sure both front and back have the same height */
    backface-visibility: hidden;
    justify-content: center;
    align-items: center;
}

/* Front card face styling */
.flip-card-front {
    color: black;
}

/* Back card face styling */
.flip-card-back {
    color: white;
    transform: rotateY(180deg);
}
.flip-card-back p {
    color: white;
}
/* Flip animation */
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Positioning the info button */
.info-btn {
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: none;
}

/* Positioning the back button */
.back-btn {
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: none;
    color: #fff;
}
.leaflet-control-attribution {display:none!important}
/* Hide the message by default */
.nav-link {font-size: 1.1em!important;color:#5c5c5c;}
.bottomMenuLinks{font-size: 0.65em;}

/* == UX == */
/* Add a fade-in effect */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.fade-in.show {
    opacity: 1;
}
/* Add a slide-in effect */
.slide-in {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 1s ease-in, opacity 1s ease-in;
}
.slide-in-right {
    transform: translateX(100%);
    opacity: 0;
    transition: transform 1s ease-in, opacity 1s ease-in;
}

.slide-in.show {
    transform: translateX(0);
    opacity: 1;
}


/* ==== */
.cardID{display:none}
.activeBottomMenuLink {color:#fff!important}
.bottomMenu {
	/*border-radius: 65px; /* Top corners rounded */
	background-color: #4230e5;
	box-shadow: 0px -2px 15px rgba(185, 177, 177, 0.8); /* Softer shadow for emphasis */
	/*border-top-left-radius: 20px;
	border-top-right-radius: 20px;*/
	padding-bottom: 6px;
}

.bottomMenuLink {
    color: #fff; /* Darker text color for better contrast */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}
.bottomMenuLink:active {
  transform: translateY(-8px);
}
.bottomMenuLink:hover {
    color: #fff; /* Change color on hover */
}

.bottomMenu .nav-item {
    padding: 5px 0;
}
.card-title{color:#5c5c5c}
a.menuLinksGranny {
	color:#201b8C!important;
  font-weight: 500;
}.modal {
  z-index: 1100 !important; /* Ensure the modal appears on top */
}
.btn{border-radius:20px}
.modal-backdrop {
  z-index: 1040 !important; /* Ensure the backdrop appears just below the modal */
}
.tooltip {  z-index: 1600 !important;}
.grannyheader {max-width:1500px;background:#4230E5;height:100px;border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;}
.grannyBM {max-width:1500px;}
.navbarGranny {height:100px}
.fixed-size {
    width: 150px;
    height: 150px;
}
input:focus, 
textarea:focus, 
select:focus {
    border-color: #4230E5 !important;  /* Change the border color */
    box-shadow: 0 0 0 0.2rem rgba(255, 207, 243, 0.1) !important;  /* Change the outline shadow */
    outline: none !important;  /* Remove default blue outline */
}
/* Photos de profil*/
.profile-img-container {
	position: relative;
	display: inline-block;
}

.profile-img-container img {
	border:1px solid #5c5c5c60; /* Customize the border */
}

.upload-icon {
	display: inline-block;
	color: #4230E5;
	margin-top: 10px;
	cursor: pointer;
}

/* Optional: Style the pencil icon */
.upload-icon i {
	color: #4230E5;
	position: absolute;
	bottom: 5px;
  right: -2px;
}

.upload-icon:hover i {
	color: #4230E5;
}

/* Style for the autocomplete dropdown */
.ui-autocomplete {
    background-color: #fff; /* White background for better visibility */
    border: 1px solid #ccc; /* Light border */
    max-height: 200px; /* Limit the height of the dropdown */
    overflow-y: auto; /* Scroll if there are many suggestions */
    z-index: 1000; /* Ensure it's on top of other elements */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: add some shadow */
		
}

/* Style for the autocomplete items */
.ui-menu-item {
    left:0!important;
    font-size: 1em;
		font-weight:600;
    color: #fff;
		background:#4230e5;
    cursor: pointer;
		padding: 10px;
		margin-left:0;
}

/* Highlighted item */
.ui-state-active {
   /*background-color: #f1f1f1; /* Light gray for highlighted item */
    color: #000; /* Darker text for visibility */
}
.invalid-profile-photo {
    border: 2px solid red !important;
}
.floating-alert {
        position: fixed;
        top: 100px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        width: 90%;
				max-width:450px;
        text-align: left;
    }
.priceEmphasis {
	font-family: "Fredoka", sans-serif;font-weight:500;font-size:1.5em;color:#4230E5
}

/* hide arrow to number fields */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
@keyframes glow {
  0% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
                 0 0 40px rgba(255, 255, 255, 0.5),
                 0 0 80px rgba(255, 255, 255, 0.5),
                 0 0 160px rgba(255, 255, 255, 0.5);
  }
  100% {
    text-shadow: none;
  }
}

.glowing-text {
  animation: glow 1s ease-in-out;
}
/*
    .grannyAppPage::before {
        content: "";
        position: fixed;
        top: -20%; 
        left: -10%; 
        width: 120%;
        height: 120%;
        background: url('../images/bg_logo_k.svg') no-repeat center center;
        background-size: 180%; 
        opacity: 0.1;
        z-index: -1;
        pointer-events: none; 
    }*/
	.navbar {
		position: relative;
		z-index: 1100!important; /* Higher than .sticky-welcome */
	}
	.navigation {
		z-index: 1100!important; /* Higher than .sticky-welcome */
	}
	.navbar-toggler {
		z-index: 1102!important;
	}
	.navbar-collapse {
		z-index: 1101!important; /* was 1000 */
	}
	.autofilled-highlight {
	background-color: #ECEBFC !important;
	transition: background-color 1.5s ease;
	}
/* Ensure our transform animation always applies, even on mobile */
.navbar-collapse,
.custom-slide {
	transform: translateX(100vw) !important;
	transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
	will-change: transform;
}

/* Visible state */
.navbar-collapse.show,
.custom-slide.show {
	transform: translateX(0) !important;
}

/* Disable Bootstrap’s collapsing animation that conflicts with ours */
.collapsing {
	height: auto !important;
	overflow: visible !important;
	transition: none !important;
}
/* circles for remaining hours */
.donuts-inline {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
}

.donut-center{
  position:relative;
  text-align:center;
}

.donut-value{
 position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  line-height: 1;
  text-align: center;
  height: fit-content;
}

.donut-hours{
  font-weight:900;
  font-size:1.4rem;
}

.donut-minutes{
  font-weight:600;
  font-size:0.85rem;
  opacity:0.85;
}

.donut-title{
  margin-top:6px;
  font-size:0.8rem;
  font-weight:500;
  text-align:center;
}

@media(max-width:420px){
  .donuts-inline{gap:18px;}
  .donut-ring{width:80px;height:80px;}
}
.numberCircle {
  width: 85px;              /* fixed width */
  height: 85px;             /* equal height ensures perfect circle */
  background: #48BC69;      /* default color (you can override per item) */
  color: white;
  border-radius: 50%;
  display: flex;            /* center content horizontally & vertically */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}