#resultat {
}

.label4range label {
	padding-top:30px;
	padding-bottom:10px;
	padding-right:4px;
	font-weight:500;
}

#salaireBrutInput, #tjmInput, #joursInput {
	width:20%;
	border:0px;
	margin:0px;
	padding:0 0 0 0px;
	text-align:right;
	font-weight:600;
	
}

inforange {
	padding:0px;
	margin:0px;
	font-weight:600;
}

#valider-changements  {
	color:#FFF;
	background-color:#00D400;
	border-color:#00D400;
	border-radius: 20px;
	font-weight:600;
}
#contacteznous  {
	color:#FFF;
	background-color:#00D400;
	border:solid 1px #00D400;
	border-radius: 20px;
	padding:10px 15px;
	font-weight:600;
}
#contacteznous a  {
	color:#FFF;
}

#contacteznous:hover  {
	color:#FFF;
	border:solid 1px #FFF;

}

.buttoncontact {
	padding-top:40px;
}



#valider-changements:hover, , #contacteznous:hover {
	border-color:#FFF;
}

.button-simu {
	padding-top:30px;
}

#btsalarie {
	color:#FFF; 
	background-color:#66656b;
	padding:10px 20px;
	border-radius:20px;
	border: 1px solid #66656b;
	font-weight:bold;
}
#btsalarie:hover {
	cursor:pointer;
}

#btportage {
	color:#000; 
	background-color:#FFF;
	padding:10px 20px;
	border-radius:20px;
	border: 1px solid #66656b;
	font-weight:normal;

}
#btsalarie:hover, #btportage:hover{
	cursor:pointer;
}

#formsimu {
	float:left;
	width:570px; 
	display:block;
	height:450px;
	padding:20px 50px;

}

#resultat {
	width:570px;
	float:left;
	height:450px;
	background-color:#66656b;
	margin:0px;
	padding:20px;
	color:#FFF;
}

#jesuis {
	padding:30px 0px;
}

.revenufreelanceaf {
	font-size:75px;
	color:#00D400;
	text-align:center;
	font-weight:bold;
	margin-top:15px;
}
.revenufreelanceaf span {
	color:#FFF;
	font-size:20px;
}
.inforevenufreelanceaf {
	text-align:center;
}
.diffrevenuaf {
	padding-top:30px;
	font-weight:bold;
	font-size:25px;
	text-align:center;
}
.inforevenuinit {
	width:100%;
	height:auto;
	text-align:center;
	font-size:30px;
	color:#FFF;	
	font-weight:600;
	padding-top:30px;
}
.inforevenuinit span {
	color:#00D400;	
	font-weight:600;
}

input[type="range"]:focus::-webkit-slider-thumb {
  outline: 3px solid #00D400;
  outline-offset: 0.125rem;
}

.rangecustom:focus::-moz-range-thumb{
  outline: 3px solid #00D400;
  outline-offset: 0.125rem;
}


/* The slider itself */
.rangecustom {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 75%; 
  background: #66656b; 
  opacity: 1 /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 1rem;
  height:15px;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.rangecustom::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #00D400; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius:12px;
}

.rangecustom::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #00D400; /* Green background */
  cursor: pointer; /* Cursor on hover */
    border-radius:12px;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
 
/* Chrome */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin:0;
}
 
/* Opéra*/
input::-o-inner-spin-button,
input::-o-outer-spin-button { 
	-o-appearance: none;
	margin:0
}


@media only screen and (min-width: 320px) and (max-width: 600px) {
	#formsimu {
		width:100%; 
		padding:3px;
	}

	#resultat {
		width:100%;
	}
	
}
@media only screen and (max-width: 1139px) {
	
	#formsimu {
		width:100%; 
		padding:5px 5px;
	}

	#resultat {
		width:100%;
	}
	
	
}