*,*::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	padding: 40px;
}

h1 {
	margin-top: 20px;
	margin-bottom:10px;
}

/* project 1 start */
.custom-btn-base {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 145px;
}

.custom-btn-base .custom-btn-hidden {
  display:none;
}

.custom-btn-slider {
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 300ms;
  background-color: #fff;
  box-shadow: 0px 2px 5px 0px #fcb900;
}

/* .custom-btn-slider:before {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  height: 26px;
  width: 26px;
  border: 2px solid #ffffff;
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../img/power-btn.png');
  transition: 300ms;
} */

.custom-btn-slider:after {
	content: "Valider l’action";
	color: #fcb900;
	position: absolute;
	right: 0px;
	bottom: 4px;
	height: 25px;
	width: 127px;
	background-size: contain;
	background-repeat: no-repeat;
	font-weight: 500;
	/* background-image: url('../img/battery-off.gif'); */
	/* transition: 300ms; */
}

.custom-btn-hidden:checked + .custom-btn-slider {
  background-color: #ff0000; 
  box-shadow: 0px 3px 4px 0px #ff0000;
}

.custom-btn-hidden:checked + .custom-btn-slider:before {
  background-image: url('../img/star-lines.gif');
  transform: translateX(40px);
}


.custom-btn-hidden:checked + .custom-btn-slider:after {
	/* background-image: url('../img/battery-on.gif'); */
	bottom: 4px;
	width: 118px;
	right: 11px;
	content: "Annuler l’action";
	color: #fff;

}

.custom-btn-slider {
  border-radius: 34px;
}

.custom-btn-slider:before {
  border-radius: 50%;
}
/* project 1 end */



/* project 2 start */
.custom-range-line {
  outline: 0;
  border: 0;
  width: 400px;
  max-width: 100%;
  border-radius: 500px;
  transition: box-shadow 200ms ease-in-out;
   overflow: hidden;
    height: 20px;
    pointer-events: none;
    -webkit-appearance: none;
    background-color: #a4a6a3;
}
.custom-range-line.full {
	background-repeat: repeat;
	background-size: 96px;
	background-position: center;
	background-color: #f9c732;
	background-image: url('../img/stars.webp');
}
.custom-range-line::-webkit-slider-runnable-track {
    height: 100%;
    color: #444;
    -webkit-appearance: none;
    transition: box-shadow 200ms ease-in-out;
}
.custom-range-line::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: #f9c732;
    cursor: default;
    border-radius: 50%;
    position: relative;
    background-size: contain;
    appearance: none;
    background-image: url('../img/bolt-black.png');
    transition: box-shadow 200ms ease-in-out;
    box-shadow: -940px 0 0 930px #f9c732, inset 0 0 0 0px #f9c732;
}
.custom-range-line.full::-webkit-slider-thumb {
	box-shadow: none;
}
.custom-range-line:active::-webkit-slider-thumb {
    background-size: contain;
    background-position: center;
}
.custom-range-line::-moz-range-progress {
  background-color: #f9c732;
}
.custom-range-line::-moz-range-track {
  background-color: #f9c732;
}
.custom-range-line::-ms-fill-lower {
  background-color: #f9c732;
}
.custom-range-line::-ms-fill-upper {
  background-color: #a4a6a3;
}

/* active state start */
.custom-range-line.active.custom-range-line::-webkit-slider-thumb {
	background-image: url('../img/bolt-white.png');
}
/* active state end */

/* project 2 end */



/* project 3 start */
.custom-range-circle-hidden {
	display: none;
}
.custom-range-circle {
	--percent: 0;
	position: relative;
	width: 220px;
	height: 220px;
}
.custom-range-circle svg {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	transform: rotate(-90deg);
}
.custom-range-circle.full svg {
	background-repeat: repeat;
	background-size: 96px;
	background-position: center;
	background-color: #f9c732;
	background-image: url('../img/stars.webp');
}
.custom-range-circle svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #a4a6a3;
  stroke-width: 20;
  stroke-linecap: round;
}
.custom-range-circle-img {
	position: absolute;
	top: 0%;
	right: 46%;
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 99px;
	background-color: #f9c732;
	background-size: contain;
	background-image: url('../img/bolt-black.png');
	transition: 50ms;
}
.custom-range-circle-img.active {
	background-image: url('../img/bolt-white.png');
}
.custom-range-circle svg circle:last-of-type {
  /* stroke-dasharray: 625px;
  stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100); */
  stroke: #f9c732;
}
.custom-range-circle.full svg circle {
	stroke: transparent !important;
}
.custom-range-circle-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
	text-align: center;
	white-space: nowrap;
}
.custom-range-circle-text::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 180px;
	width: 180px;
	border-radius: 9999px;
	background-color: #fff;
}
.custom-range-circle-text div {
	position: relative;
}
.custom-range-circle-text-value.active {color: #f9c732;}
.custom-range-circle-img.pct1 {top:0%;right:42.9%;}
.custom-range-circle-img.pct2 {top:0.5%;right:39.7%;}
.custom-range-circle-img.pct3 {top:1%;right:36.7%;}
.custom-range-circle-img.pct4 {top:1.5%;right:34.1%;}
.custom-range-circle-img.pct5 {top:2.4%;right:31.2%;}
.custom-range-circle-img.pct6 {top:3.4%;right:28.5%;}
.custom-range-circle-img.pct7 {top:4.6%;right:26%;}
.custom-range-circle-img.pct8 {top:5.7%;right:23%;}
.custom-range-circle-img.pct9 {top:7.3%;right:21%;}
.custom-range-circle-img.pct10 {top:9.3%;right:18%;}
.custom-range-circle-img.pct11 {top:11%;right:16%;}
.custom-range-circle-img.pct12 {top:13%;right:13.5%;}
.custom-range-circle-img.pct13 {top:14.5%;right:12.1%;}
.custom-range-circle-img.pct14 {top:16.5%;right:10.6%;}
.custom-range-circle-img.pct15 {top:18.5%;right:8.6%;}
.custom-range-circle-img.pct16 {top:21.5%;right:6.6%;}
.custom-range-circle-img.pct17 {top:23.5%;right:5.5%;}
.custom-range-circle-img.pct18 {top:26.5%;right:4%;}
.custom-range-circle-img.pct19 {top:28.5%;right:3%;}
.custom-range-circle-img.pct20 {top:31.5%;right:2.5%;}
.custom-range-circle-img.pct21 {top:34.5%;right:1.5%;}
.custom-range-circle-img.pct22 {top:36.7%;right:0.7%;}
.custom-range-circle-img.pct23 {top:39.7%;right:0.4%;}
.custom-range-circle-img.pct24 {top:42.7%;right:0%;}
.custom-range-circle-img.pct25 {top:45.2%;right:0%;}
.custom-range-circle-img.pct26 {top:48.2%;right:0%;}
.custom-range-circle-img.pct27 {top:51.2%;right:0.5%;}
.custom-range-circle-img.pct28 {top:54.2%;right:1%;}
.custom-range-circle-img.pct29 {top:56.5%;right:1.5%;}
.custom-range-circle-img.pct30 {top:59%;right:2.5%;}
.custom-range-circle-img.pct31 {top:62%;right:3%;}
.custom-range-circle-img.pct32 {top:65%;right:4.5%;}
.custom-range-circle-img.pct33 {top:67%;right:5.5%;}
.custom-range-circle-img.pct34 {top:69.5%;right:7%;}
.custom-range-circle-img.pct35 {top:72.5%;right:9%;}
.custom-range-circle-img.pct36 {top:74.5%;right:10.5%;}
.custom-range-circle-img.pct37 {top:76.5%;right:12.5%;}
.custom-range-circle-img.pct38 {top:78.5%;right:14.5%;}
.custom-range-circle-img.pct39 {top:80.5%;right:16.5%;}
.custom-range-circle-img.pct40 {top:82.5%;right:19.5%;}
.custom-range-circle-img.pct41 {top:84.1%;right:21.5%;}
.custom-range-circle-img.pct42 {top:86%;right:24.5%;}
.custom-range-circle-img.pct43 {top:87%;right:26.5%;}
.custom-range-circle-img.pct44 {top:88%;right:29.5%;}
.custom-range-circle-img.pct45 {top:89%;right:32.5%;}
.custom-range-circle-img.pct46 {top:89%;right:33.5%;}
.custom-range-circle-img.pct47 {top:90%;right:36.5%;}
.custom-range-circle-img.pct48 {top:90.5%;right:39.5%;}
.custom-range-circle-img.pct49 {top:91%;right:42.5%;}
.custom-range-circle-img.pct50 {top:91%;right:45%;}
.custom-range-circle-img.pct51 {top:91%;right:48%;}
.custom-range-circle-img.pct52 {top:90.5%;right:51%;}
.custom-range-circle-img.pct53 {top:90.5%;right:53%;}
.custom-range-circle-img.pct55 {top:88.5%;right:60%;}
.custom-range-circle-img.pct56 {top:87.5%;right:62%;}
.custom-range-circle-img.pct57 {top:86.5%;right:65%;}
.custom-range-circle-img.pct58 {top:85.5%;right:67%;}
.custom-range-circle-img.pct59 {top:84.2%;right:69%;}
.custom-range-circle-img.pct60 {top:82%;right:72.7%;}
.custom-range-circle-img.pct61 {top:81%;right:74%;}
.custom-range-circle-img.pct62 {top:79%;right:76%;}
.custom-range-circle-img.pct63 {top:77%;right:78%;}
.custom-range-circle-img.pct64 {top:75%;right:80%;}
.custom-range-circle-img.pct65 {top:72%;right:82.5%;}
.custom-range-circle-img.pct66 {top:70%;right:83.5%;}
.custom-range-circle-img.pct67 {top:68%;right:85%;}
.custom-range-circle-img.pct68 {top:65%;right:86.5%;}
.custom-range-circle-img.pct69 {top:62%;right:87.7%;}
.custom-range-circle-img.pct70 {top:60%;right:88.5%;}
.custom-range-circle-img.pct71 {top:57%;right:89.5%;}
.custom-range-circle-img.pct72 {top:55%;right:90%;}
.custom-range-circle-img.pct73 {top:52%;right:90.5%;}
.custom-range-circle-img.pct74 {top:49%;right:91%;}
.custom-range-circle-img.pct75 {top:46%;right:91%;}
.custom-range-circle-img.pct76 {top:43%;right:91%;}
.custom-range-circle-img.pct77 {top:41%;right:90.6%;}
.custom-range-circle-img.pct78 {top:38%;right:90.6%;}
.custom-range-circle-img.pct79 {top:35%;right:89.5%;}
.custom-range-circle-img.pct80 {top:32%;right:88.5%;}
.custom-range-circle-img.pct81 {top:30%;right:88%;}
.custom-range-circle-img.pct82 {top:27%;right:87%;}
.custom-range-circle-img.pct83 {top:25%;right:86%;}
.custom-range-circle-img.pct84 {top:22%;right:84%;}
.custom-range-circle-img.pct85 {top:20%;right:83%;}
.custom-range-circle-img.pct86 {top:17%;right:81%;}
.custom-range-circle-img.pct87 {top:15%;right:79%;}
.custom-range-circle-img.pct88 {top:13%;right:77.5%;}
.custom-range-circle-img.pct89 {top:10%;right:74%;}
.custom-range-circle-img.pct90 {top:9%;right:72.5%;}
.custom-range-circle-img.pct91 {top:7.5%;right:70.5%;}
.custom-range-circle-img.pct92 {top:6.5%;right:68.5%;}
.custom-range-circle-img.pct93 {top:4.5%;right:65.5%;}
.custom-range-circle-img.pct94 {top:3.5%;right:63.5%;}
.custom-range-circle-img.pct95 {top:2.5%;right:60.5%;}
.custom-range-circle-img.pct96 {top:1.6%;right:58%;}
.custom-range-circle-img.pct97 {top:1%;right:55%;}
.custom-range-circle-img.pct98 {top:0.6%;right:53%;}
.custom-range-circle-img.pct99 {top:0%;right:50%;}
.custom-range-circle-img.pct100 {top:0%;right:47%;}

/* project 3 end */

.custom-euro-input, .default-euro-input {
	outline: none;
	padding: 7px 0px 7px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid #DDDDDD;
	border-radius: 5px;
}

.custom-euro-input:focus, .default-euro-input:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	border: 1px solid rgba(81, 203, 238, 1);
  }