/*=============
Adding tick marks
=========================*/
.range-slider {
  flex: 1;
font-size: 0.9rem;
}

.sliderticks {
  position: relative;
  width: calc(100% - 15px);
  font-size: 0.9rem;
}

.sliderticks span {
  /*display: flex;
  justify-content: center;*/
  position: absolute;
  width: 0px;
  height: 10px;
  background: #d3d3d3;
   line-height: 25px;
}

/*=============
End tick marks
=========================*/


input[type="range"] {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  /*  overflow: hidden;  remove this line*/
  
  /* New additions */
  height: 6px;
  background: #ccc;
  
border: initial;
  display: initial;
  padding: initial;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  height: 15px;
  width: 15px;
  background-color: #ffcc00;
  border-radius: 50%;
  border: 1px solid #000;

  /* box-shadow: -407px 0 0 400px #ffcc00; emove this line */
  transition: .2s ease-in-out;

}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #ffcc00;
  border-radius: 50%;
  border: 1px solid #000;
  
  /* box-shadow: -407px 0 0 400px #ffcc00; emove this line */
  transition: .2s ease-in-out;

  
 
}

/* Hover, active & focus Thumb: Webkit */

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(248, 205, 15, 0.308)
}
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(248, 205, 15, 0.308)
}
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(248, 205, 15, 0.308)
}

/* Hover, active & focus Thumb: Firfox */

input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 10px rgba(255,85,0, .1)
}
input[type="range"]:active::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(248, 205, 15, 0.308)
}
input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 13px rgba(248, 205, 15, 0.308)    
}

/*=============
Aesthetics 
=========================*/

body {
  font-family: system-ui;
}

h1 {
  color: #4b4949; 
  text-align: center;
}

.slider-wrapper {
  color: #4b4949; 
  background: #ffcc00;
  width: 100%;
  height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  border: 1px solid #000;
}

.range {
  display: flex;
  align-items: center;
  gap: 1rem;
  /*max-width: 500px;*/
  margin: 20px auto 20px auto;
  height: 10rem;
  width: 90%;
  background: #fff;
  padding: 0px 10px;
  border: 2px solid #000;
}

.value { 
}

.value-wrapper {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  width: 50px;
}


.calculate-wrapper {
  width: 95%;
}
.calculate {
  background-color: #fcb900;
  padding: 5px 10px;
  margin-bottom: 20px;
  color: inherit;
  border: 1px solid #000;
}
.result-message p {
  margin: 0;
  font-size: 0.9rem;
}
.result-message strong {
  margin-bottom: 10px;
  display: block;
  font-size: 1.5rem;
}


/* loader */
.lds-dual-ring {
/* change color here */
color: #000
}
.lds-dual-ring,
.lds-dual-ring:after {
box-sizing: border-box;
}
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 30px;
height: 30px;
margin: 9px;
border-radius: 50%;
border: 3.4px solid currentColor;
border-color: currentColor transparent currentColor transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}


.form_radio fieldset, .form_radio fieldset legeng, #form_radio_legeng  {
  font-size: 0.9rem !important;
  font-weight: initial;
}

.form_radio fieldset {
	display: inline-block;
	border: none;
}

.form_radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid #000;
	border-radius: 50%;
	margin-right: 10px;
	background-color: transparent;
	position: relative;
}

.form_radio input[type="radio"]:checked::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	background-color: #fcb900;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: appear 0.8s;
}

.form_radio label {

}

.form_radio div {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

@keyframes appear {
	0% {
		transform: translate(-50%, -50%) scale(0);
		background-color: #fff;
	}
	45% {
		transform: translate(-50%, -50%) scale(1.6);
		background-color: #fdd669;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.7);
		background-color: #ffc82f;
	}
	55% {
		transform: translate(-50%, -50%) scale(1.6);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		background-color: #fcb900;
	}
}