input[type=range] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 320px;
	margin-top: 50px;
	position: relative;
	outline: none;
	cursor: pointer;
}
input[type=range]:hover {
	opacity: 0.8;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #edbe76;
	margin-top: -5px;
	z-index: 2;
	position: relative;
}
input[type=range]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 320px;
	background: #eff0f5;
	height: 10px;
	border-radius: 10px;
}
input[type=range]:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d6d8e2;
  position: absolute;
  z-index: 1;
}

input[type=range]:before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d6d8e2;
  position: absolute;
  right: 0;
}

  input[name=var]:checked + .select_wrapper,
  input[name=button_group]:checked + .wrapper_label_th_1,
  input[name=button_group]:checked + .wrapper_label_th_2,
  input[name=button_group]:checked + .wrapper_label_th_3,
  input[name=payment]:checked + .payment_wrapper

  {
	border: 4px solid rgb(131,175,228);
	border-radius: 3px;
}
	
input[name=var]:checked + .select_wrapper:after {
	content: url("../img/check.png");
  position: relative;
  top: -158px;
  right: -213px;
}

input[name=button_group]:checked + .wrapper_label_th_1:after {
  content: url("../img/check.png");
  position: relative;
  top: -14px;
  right: -19px;
}

input[name=button_group]:checked + .wrapper_label_th_2:after {
  content: url("../img/check.png");
  position: relative;
  top: -14px;
  right: -28px;
}

input[name=button_group]:checked + .wrapper_label_th_3:after {
  content: url("../img/check.png");
  position: relative;
  top: -14px;
  right: -30px;
}

input[name=payment]:checked + .payment_wrapper:after {
  content: url("../img/check.png");
  position: relative;
  top: -37px;
  right: -50px;
}

input[name=name]{
  width: 200px;
  height: 30px;
  color: #6e768f;
  border: 1px solid #d7d9e0;
  border-radius: 3px;
  padding: 0.5em 2.5em 0.5em 1em;
}

input[name=name]+label{
  position: relative;
  display: block;
}

input[name=name]:valid+label:before{
  content: url("../img/check.png");
  position: relative;
  top: -37px;
  right: -205px;
}

input[name=name]:invalid+label:before{
  content: url("../img/invalid.png");
  position: relative;
  top: -33px;
  right: -210px;
}

input[name=card] {
  width: 250px;
  height: 25px;
  color: #6e768f;
  border: 1px solid #d7d9e0;
  border-radius: 3px;
  padding: 0.5em 2.5em 0.5em 1em;
}

input[name=card] + label:before {
  content: url('../img/credit-card.png');
  position: relative;
  left: -44px;
  top: 10px;
 
}

input[name=expiry] {
  width: 100px;
  height: 25px;
  color: #6e768f;
  border: 1px solid #d7d9e0;
  border-radius: 3px;
  padding: 0.5em 2.5em 0.5em 1em;
}

input[name=card_1] {
  width: 50px;
  height: 25px;
  color: #6e768f;
  border: 1px solid #d7d9e0;
  border-radius: 3px;
  padding: 0.5em 2.5em 0.5em 1em;
}