/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.stages {
	/*font-size: 0;*/
	text-align: justify;
	padding: 80px 0 20px;
}

.stages:after {
	content: '';
	display: inline-block;
	font-size: 0;
	text-align: justify;
	width: 100%;
}

#nw_woo_main_shortcode input[class="hidden-radio"] {
	display: none;
}

#nw_woo_main_shortcode .b-hidden {
	display: none;
}

.stages label span:nth-of-type(2) {
	background: #ffffff;
	color: #d3d3d3;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	position: relative;
	text-align: center;
	z-index: 1;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left;
	margin: 0 23% 0 0;
	opacity: 0.7;
}

.stages label span:nth-of-type(2) {
	background: #ffffff;
	color: #d3d3d3;
	border: solid 1px #d3d3d3;
	border-radius: 50%;
	display: inline-block;
	height: 50px;
	line-height: 50px;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 50px;
}

.stages label , .stages label span {
	display: inline-block;
	position: relative;
	width: 20%;
	float: left;
}

.stages label span.first {
	position: absolute;
	max-width: 230px;
	width: 100%;
	top: -80px;
	left: 0;
	line-height: 1.3;
	text-align: left;
}

.stages label span:after {
	/*content: '\2713';
	color: #f49c0d;*/
	display: block;
	/*font-size: 16px;*/
	background-image: var(--picto-etap-);
	background-repeat: no-repeat;
	position: absolute;
	left: 45px;
	top: -50px;
	background-size: contain;
	content: "";
	background-color: transparent;
	height: 120px;
	width: 110px;
	background-position: 0 100%;
}

.stages label:last-of-type {
	display: none;
}

/*#one:checked ~ .stages label[for="one"],
#two:checked ~ .stages label[for="two"],
#three:checked ~ .stages label[for="three"],
#four:checked ~ .stages label[for="four"],
#five:checked ~ .stages label[for="five"],
#six:checked ~ .stages label[for="six"] {
	border-color: #f49c0d;
}*/

.stages label.active{
	border-color: purple !important;
}

#one:checked ~ .stages label,
#two:checked ~ .stages label[for="one"] ~ label,
#three:checked ~ .stages label[for="two"] ~ label,
#four:checked ~ .stages label[for="three"] ~ label,
#five:checked ~ .stages label[for="four"] ~ label,
#six:checked ~ .stages label[for="five"] ~ label {
	font-size: 1rem;
}

@media (max-width:920px) {
	.stages label .first{
		display: none;
	}

	.stages label {
		width: 55px;
	}

	#one:checked ~ .stages label[for="one"] .first,
	#two:checked ~ .stages label[for="two"] .first,
	#three:checked ~ .stages label[for="three"] .first,
	#four:checked ~ .stages label[for="four"] .first,
	#five:checked ~ .stages label[for="five"] .first,
	#six:checked ~ .stages label[for="six"] .first {
		display: inline-block;
	}

	#one:checked ~ .stages label[for="one"],
	#two:checked ~ .stages label[for="two"],
	#three:checked ~ .stages label[for="three"],
	#four:checked ~ .stages label[for="four"],
	#five:checked ~ .stages label[for="five"],
	#six:checked ~ .stages label[for="six"] {
		display: inline-block;
		width: 55%;
	}

	#formuleForm input[class="hidden-radio"]:checked:last-of-type ~ .stages {
		padding: 0;
		height: 0;
	}

	.stages label span:nth-of-type(2):after {
		display: none;
	}

	#one:checked ~ .stages label[for="one"] span:nth-of-type(2):after,
	#two:checked ~ .stages label[for="two"] span:nth-of-type(2):after,
	#three:checked ~ .stages label[for="three"] span:nth-of-type(2):after,
	#four:checked ~ .stages label[for="four"] span:nth-of-type(2):after,
	#five:checked ~ .stages label[for="five"] span:nth-of-type(2):after,
	#six:checked ~ .stages label[for="six"] span:nth-of-type(2):after {
		display: block;
	}
	
	#one:checked ~ .stages label:after,
	#two:checked ~ .stages label[for="one"] ~ label:after,
	#three:checked ~ .stages label[for="two"] ~ label:after,
	#four:checked ~ .stages label[for="three"] ~ label:after,
	#five:checked ~ .stages label[for="four"] ~ label:after,
	#six:checked ~ .stages label[for="five"] ~ label:after {
		display: none;
	}

}

@media (max-width:568px) {

	.stages label, .stages label span {
		position: initial;
	}

	.stages label span.first {
		top: 0;
	}

	.stages label span.first {
		max-width: 300px;
		width: 290px;
	}

	.stages {
		position: relative;
	}
}

#one:checked ~ .stages label:after,
#two:checked ~ .stages label[for="one"] ~ label:after,
#three:checked ~ .stages label[for="two"] ~ label:after,
#four:checked ~ .stages label[for="three"] ~ label:after,
#five:checked ~ .stages label[for="four"] ~ label:after,
#six:checked ~ .stages label[for="five"] ~ label:after {
	display: none;
}

#formuleForm #b-stages label:last-of-type {
	display: none;
}

#nw_woo_main_shortcode .progress > span {
	background: #c0c0c0;
	display: inline-block;
	height: 5px;
	transform: translateY(-2.75em);
	transition: 0.3s;
	width: 0;
}

#two:checked ~ .progress span {
	width: calc(100% / 5 * 1);
}

#three:checked ~ .progress span {
	width: calc(100% / 5 * 2);
}

#four:checked ~ .progress span {
	width: calc(100% / 5 * 3);
}

#five:checked ~ .progress span {
	width: calc(100% / 5 * 4);
}

#six:checked ~ .progress span {
	width: calc(100% / 5 * 5);
}

.panels > div {
	display: none;
}

#one:checked ~ .panels [data-panel="one"],
#two:checked ~ .panels [data-panel="two"],
#three:checked ~ .panels [data-panel="three"],
#four:checked ~ .panels [data-panel="four"],
#five:checked ~ .panels [data-panel="five"],
#six:checked ~ .panels [data-panel="six"] {
	display: block;
	clear: both;
}

#one:checked ~ .stages [data-panel="one"] span:nth-of-type(2),
#two:checked ~ .stages [data-panel="two"] span:nth-of-type(2),
#three:checked ~ .stages [data-panel="three"] span:nth-of-type(2),
#four:checked ~ .stages [data-panel="four"] span:nth-of-type(2),
#five:checked ~ .stages [data-panel="five"] span:nth-of-type(2),
#six:checked ~ .stages [data-panel="six"] span:nth-of-type(2){
	opacity: 1;
	color: #f49c0d;
	border-color: #f49c0d;
}

#one ~ .stages [data-panel="one"],
#two ~ .stages [data-panel="two"],
#three ~ .stages [data-panel="three"],
#four ~ .stages [data-panel="four"],
#five ~ .stages [data-panel="five"],
#six ~ .stages [data-panel="six"] {
	opacity: 0.7;
	color: #d3d3d3;
}

#one:checked ~ .stages [data-panel="one"], #one:checked ~ .stages [data-panel="one"] .first,
#two:checked ~ .stages [data-panel="two"], #two:checked ~ .stages [data-panel="two"] .first,
#three:checked ~ .stages [data-panel="three"], #three:checked ~ .stages [data-panel="three"] .first,
#four:checked ~ .stages [data-panel="four"], #four:checked ~ .stages [data-panel="four"] .first,
#five:checked ~ .stages [data-panel="five"], #five:checked ~ .stages [data-panel="five"] .first,
#six:checked ~ .stages [data-panel="six"], #six:checked ~ .stages [data-panel="six"] .first{
	opacity: 1;
	color: #f49c0d;
}


.last-panel .couverts {
	padding: 10px;
}

.last-panel label {
	position: relative;
	padding-left: 90px;
}

.last-panel .couverts label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 50px;
	width: 50px;
	background-image: var(--picto-couverts-);
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: center center;
	background-size: contain;
}

.last-panel .couverts input {
	position: absolute;
	left: 65px;
	width: 20px;
	top: 4px;
}
/* Custom code for the demo */


#nw_woo_main_shortcode .form {
	background: #ffffff;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
	margin: 4em;
	min-width: 480px;
	padding: 1em;
}

.panels > div {
	margin: 1em 0 0;
	padding: 1em 0 0;
}

#nw_woo_main_shortcode input {
	box-sizing: border-box;
	display: block;
	/*padding: .4em;
	width: 100%;*/
}

.nw_woo_main_shortcode button {
	background-color: #0cc39f;
	border: 0;
	color: #ffffff;
	cursor: pointer;
	font-weight: 700;
	margin: 1em 0 0 0;
	padding: 1em;
}

#nw_woo_main_shortcode button:hover {
	opacity: 0.8;
}

#add_formule_to_panier.submit-button.non-active {
	display: none;
}
#add_formule_to_panier.submit-button.non-active.activepage {
	display: inline-block;
}

#nw_woo_main_shortcode .product img {
	cursor: pointer;
}
/*********************/

#nw_woo_main_shortcode .formrow {
	position:relative;
	display: inline-block;
	margin:auto;
	padding:10px;
	background:transparent;
	z-index: 1;
}

#nw_woo_main_shortcode .formrow .supplement {
	position: absolute;
	bottom: 20px;
	right: -60px;
	text-align: center;
	z-index: 9;
}

#nw_woo_main_shortcode .checklabel {
	display:inline-block;
	width:100%;
	border:1px solid #f49c0d;
	background:#fff;
	color: #f49c0d;
	text-align:center;
	padding:8px 20px;
	cursor: pointer;
	border-radius: 15px;
	margin: 0;
	font-size: 14px;
}
#nw_woo_main_shortcode .checklabel:hover {
	background:#f49c0d;
	color: #fff;
}
#nw_woo_main_shortcode .checkbox {
	position:absolute;
	right:10px;
	top:10px;
	width: 1em;
	height: 1em;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	border:none;
	padding:0;
	border-radius:0;
	vertical-align: middle;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3e%3cpath d='M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z'/%3e%3c/svg%3e");
	background-repeat:no-repeat;
	background-size:cover;
	background-color:transparent;
	background-position:-10em -10em;
	transition:.3s ease;
	outline:0;
}
#nw_woo_main_shortcode .checkbox:focus + label{
	border-color:#f49c0d;
}
#nw_woo_main_shortcode .checkbox:active + label {
	background-color: #f49c0d;
	color: #fff;
}
#nw_woo_main_shortcode .checkbox:checked {
	background-position: 0 0;
}
#nw_woo_main_shortcode .checkbox:checked + label {
	background-color: #f49c0d;
	color: #fff;
}

/*
 #nw_woo_main_shortcode li {
	display: block;
	position: relative;
	float: left;
	margin: 20px 40px 0 0;
}

.nw-description {
	text-align: center;
	display: block;
	line-height: 1;
}

.nw-prod-list {
	list-style: none inside none;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

.nw-button {
	text-align: center;
}

*/

/* Style the form */
#nw_woo_main_shortcode #regForm {
	margin: 10px auto;
	padding: 0;
	width: 100%;
	min-width: 300px;
}

/* Style the input fields */
#nw_woo_main_shortcode input {
	/*padding: 10px;
	width: 100%;
	font-size: 17px;
	font-family: Raleway;
	border: 1px solid #aaaaaa;*/
}

/* Mark input boxes that gets an error on validation: */
#nw_woo_main_shortcode input.invalid {
	background-color: #ffdddd;
}

/* Hide all steps by default: */
#nw_woo_main_shortcode .tab {
	display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbbbbb;
	border: none;
	border-radius: 50%;
	display: inline-block;
	opacity: 0.5;
}

/* Mark the active step: */
.step.active {
	opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
	background-color: #4CAF50;
}