@include('plantillas.header')


<style>
    :root {
	--white: #ffffff;
	--light: chartreuse;;
	--black: #000000;
	--dark-blue: #1f2029;
	--dark-light: #353746;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--grey: #ecedf3;
	--azul:#527DFF;
	--image:{{$cuestionario->imagen_bienvenida}};
	--color:{{$cuestionario->txtcolor}};
}

@media (min-width: 1200px){
.container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1195px !Important;
}
}
.checkbox-tools:not(:checked) + label {
    background-image: url("{{$cuestionario->imagen_bienvenida}}");
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
    border-width: 2px;
    border-style: solid;
   border-color: transparent;
    background-size: cover;
}

/* #Primary
================================================== */


::selection {
	color: var(--white);
	background-color: var(--black);
}
::-moz-selection {
	color: var(--white);
	background-color: var(--black);
}
mark{
	color: var(--white);
	background-color: var(--black);
}
.section {
    position: relative;
	width: 100%;
	display: block;
	text-align: center;
	margin: 0 auto;
}
.over-hide {
    overflow: hidden;
}
.z-bigger {
    z-index: 100 !important;
}


.background-color{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark-blue);
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox:checked ~ .background-color{
	background-color: var(--white);
}


[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
	position: relative;
	width: 70px;
	display: inline-block;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	margin: 17px 0;
	margin-top: 100px;
	height: 6px;
	border-radius: 4px;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
	position: absolute;
	font-family: 'unicons';
	cursor: pointer;
	top: -17px;
	z-index: 2;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox:not(:checked) + label:before {
	content: '\eac1';
	left: 0;
	color: var(--color);
	background-color: var(--dark-light);
	box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
	content: '\eb8f';
	left: 30px;
	color: var(--color);
	background-color: var(--dark-blue);
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.checkbox:checked ~ .section .container .row .col-12 p{
	color: var(--dark-blue);
}


.checkbox-tools:checked + label{
	position: relative;
	display: inline-block;
	padding-left: 3px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-right: 1px;

	font-size: 1.4rem;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	/*text-transform: uppercase;*/
	color: var(--color);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	width:300px;
	max-width: 100%;
}


.checkbox-tools:not(:checked) + label{
	position: relative;
	display: inline-block;
	padding-left: 3px;
    padding-bottom: 20px;
    padding-right: 1px;
    padding-top: 20px;
	font-size: 1.4rem;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
		width:300px;
	max-width: 100%;
/*	text-transform: uppercase; */
	color: var(--color);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}

.checkbox-tools:not(:checked) + label{
	background-color: var(--white);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	border-width: 2px;
    border-style: solid;
    /*border-color: var(--white);*/
}
.checkbox-tools:checked + label{
	background-image: url("{{$cuestionario->imagen_bienvenida}}");
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	border-width: 2px;
    border-style: solid;
    border-color: var(--light);
    background-size: cover;
}

.border-input{
    	border-width: 2px;
    border-style: solid;
   /* border-color: var(--color);*/
}

textarea {
  max-width: 100%;
}

.responsive-altura{
    position:relative;
    bottom: 100px;
}

.checkbox-tools:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-tools:checked + label::before,
.checkbox-tools:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-image: linear-gradient(298deg, var(--azul), var(--azul));
	z-index: -1;
}
.checkbox-tools:checked + label .uil,
.checkbox-tools:not(:checked) + label .uil{
	font-size: 24px;
	line-height: 24px;
	display: block;
	padding-bottom: 10px;
}

.checkbox:checked ~ .section .container .row .col-12 .checkbox-tools:not(:checked) + label{
	background-color: var(--light);
	color: var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
	position: relative;
	display: inline-block;
	padding: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 260px;
	font-size: 52px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	/*text-transform: uppercase;*/
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	-webkit-text-stroke: 1px var(--white);
    text-stroke: 1px var(--white);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
}
.checkbox-budget:not(:checked) + label{
	background-color: var(--dark-light);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
	background-color: transparent;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
	position: relative;
	display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
	position: absolute;
	content: attr(data-hover);
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	-webkit-text-stroke: transparent;
    text-stroke: transparent;
    -webkit-text-fill-color: var(--white);
    text-fill-color: var(--white);
    color: var(--white);
	-webkit-transition: max-height 0.3s;
	-moz-transition: max-height 0.3s;
	transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
	max-height: 0;
}
.checkbox-budget:checked + label span::before{
	max-height: 100%;
}

.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
	background-color: var(--light);
	-webkit-text-stroke: 1px var(--dark-blue);
    text-stroke: 1px var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-booking:checked + label,
.checkbox-booking:not(:checked) + label{
	position: relative;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-ms-flex-pack: center;
	text-align: center;
	padding: 0;
	padding: 6px 25px;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 16px;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
    color: var(--white);
	/*text-transform: uppercase;*/
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-booking:checked + label::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:not(:checked) + label:hover::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:checked + label::before,
.checkbox-booking:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
}
.checkbox-booking:checked + label::after,
.checkbox-booking:not(:checked) + label::after{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:checked + label::after{
	opacity: 0;
}
.checkbox-booking:checked + label .uil,
.checkbox-booking:not(:checked) + label .uil{
	font-size: 20px;
}
.checkbox-booking:checked + label .text,
.checkbox-booking:not(:checked) + label .text{
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 300ms linear;
	transition: opacity 300ms linear;
}
.checkbox-booking:checked + label .text{
	opacity: 0.6;
}
.checkbox-booking:checked + label .text::after,
.checkbox-booking:not(:checked) + label .text::after{
	position: absolute;
	content: '';
	width: 0;
	left: 0;
	top: 50%;
	margin-top: -1px;
	height: 2px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label .text::after{
	width: 0;
}
.checkbox-booking:checked + label .text::after{
	width: 100%;
}

.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label{
	background-color: var(--light);
    color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label::after,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label::after{
	background-color: var(--light);
}




.link-to-page {
	position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20000;
    cursor: pointer;
    width: 50px;
}
.link-to-page img{
	width: 100%;
	height: auto;
	display: block;
}
</style>

<style>


:root {
	--white: #ffffff;
	--light: #f0eff3;
	--black: #000000;
	--dark-blue: #1f2029;
	--dark-light: #353746;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--grey: #ecedf3;
	--azul:#527DFF;
}

/* #Primary
================================================== */


::selection {
	color: var(--white);
	background-color: var(--black);
}
::-moz-selection {
	color: var(--white);
	background-color: var(--black);
}
mark{
	color: var(--white);
	background-color: var(--black);
}
.section {
    position: relative;
	width: 100%;
	display: block;
	text-align: center;
	margin: 0 auto;
}
.over-hide {
    overflow: hidden;
}
.z-bigger {
    z-index: 100 !important;
}


.background-color{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark-blue);
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox:checked ~ .background-color{
	background-color: var(--white);
}


[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
	position: relative;
	width: 70px;
	display: inline-block;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	margin: 17px 0;
	margin-top: 100px;
	height: 6px;
	border-radius: 4px;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
	position: absolute;
	font-family: 'unicons';
	cursor: pointer;
	top: -17px;
	z-index: 2;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox:not(:checked) + label:before {
	content: '\eac1';
	left: 0;
	color: var(--grey);
	background-color: var(--dark-light);
	box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
	content: '\eb8f';
	left: 30px;
	color: var(--yellow);
	background-color: var(--dark-blue);
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.checkbox:checked ~ .section .container .row .col-12 p{
	color: var(--dark-blue);
}


.checkbox-tools1:checked + label{
	position: relative;
	display: inline-block;
	padding-left: 3px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-right: 1px;

	/*font-size: 1.4rem;*/
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	/*text-transform: uppercase;*/
	color: var(--white);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	width:150px;
	max-width: 100%;
}


.checkbox-tools1:not(:checked) + label{
	position: relative;
	display: inline-block;
	padding-left: 3px;
    padding-bottom: 20px;
    padding-right: 1px;
    padding-top: 20px;
	/*font-size: 1.4rem;*/
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
		width:150px;
	max-width: 100%;
/*	text-transform: uppercase; */
	color: var(--azul);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}

.checkbox-tools1:not(:checked) + label{
	background-color: var(--white);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	border-width: 2px;
    border-style: solid;
    border-color: var(--azul);
}
.checkbox-tools1:checked + label{
	background-color: transparent;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	border-width: 2px;
    border-style: solid;
    border-color: var(--azul);
}

.border-input{
    	border-width: 2px;
    border-style: solid;
    /*border-color: var(--azul);*/
}

textarea {
  max-width: 100%;
}

.responsive-altura{
    position:relative;
    bottom: 100px;
}

.checkbox-tools1:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-tools1:checked + label::before,
.checkbox-tools1:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-image: linear-gradient(298deg, var(--azul), var(--azul));
	z-index: -1;
}
.checkbox-tools1:checked + label .uil,
.checkbox-tools1:not(:checked) + label .uil{
	font-size: 24px;
	line-height: 24px;
	display: block;
	padding-bottom: 10px;
}

.checkbox:checked ~ .section .container .row .col-12 .checkbox-tools1:not(:checked) + label{
	background-color: var(--light);
	color: var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
	position: relative;
	display: inline-block;
	padding: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 260px;
	font-size: 52px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	/*text-transform: uppercase;*/
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	-webkit-text-stroke: 1px var(--white);
    text-stroke: 1px var(--white);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
}
.checkbox-budget:not(:checked) + label{
	background-color: var(--dark-light);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
	background-color: transparent;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
	position: relative;
	display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
	position: absolute;
	content: attr(data-hover);
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	-webkit-text-stroke: transparent;
    text-stroke: transparent;
    -webkit-text-fill-color: var(--white);
    text-fill-color: var(--white);
    color: var(--white);
	-webkit-transition: max-height 0.3s;
	-moz-transition: max-height 0.3s;
	transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
	max-height: 0;
}
.checkbox-budget:checked + label span::before{
	max-height: 100%;
}

.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
	background-color: var(--light);
	-webkit-text-stroke: 1px var(--dark-blue);
    text-stroke: 1px var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-booking:checked + label,
.checkbox-booking:not(:checked) + label{
	position: relative;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-ms-flex-pack: center;
	text-align: center;
	padding: 0;
	padding: 6px 25px;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 16px;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
    color: var(--white);
	/*text-transform: uppercase;*/
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-booking:checked + label::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:not(:checked) + label:hover::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:checked + label::before,
.checkbox-booking:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
}
.checkbox-booking:checked + label::after,
.checkbox-booking:not(:checked) + label::after{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:checked + label::after{
	opacity: 0;
}
.checkbox-booking:checked + label .uil,
.checkbox-booking:not(:checked) + label .uil{
	font-size: 20px;
}
.checkbox-booking:checked + label .text,
.checkbox-booking:not(:checked) + label .text{
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 300ms linear;
	transition: opacity 300ms linear;
}
.checkbox-booking:checked + label .text{
	opacity: 0.6;
}
.checkbox-booking:checked + label .text::after,
.checkbox-booking:not(:checked) + label .text::after{
	position: absolute;
	content: '';
	width: 0;
	left: 0;
	top: 50%;
	margin-top: -1px;
	height: 2px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label .text::after{
	width: 0;
}
.checkbox-booking:checked + label .text::after{
	width: 100%;
}

.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label{
	background-color: var(--light);
    color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label::after,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label::after{
	background-color: var(--light);
}




.link-to-page {
	position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20000;
    cursor: pointer;
    width: 50px;
}
.link-to-page img{
	width: 100%;
	height: auto;
	display: block;
}


</style>

@foreach($cuestionario_pregunta2 as $plantillas2)
<style>
    :root {
	--white: #ffffff;
	--light: chartreuse;;
	--black: #000000;
	--dark-blue: #1f2029;
	--dark-light: #353746;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--grey: #ecedf3;
	--azul:#527DFF;
	--image:{{$plantillas2->imagen_fondo}};
	--color-{{$plantillas2->id}}:{{$plantillas2->txtcolor}};
}


.checkbox-tools-{{$plantillas2->id}}:not(:checked) + label {
    background-image: url("{{$plantillas2->imagen_fondo}}");
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
    border-width: 2px;
    border-style: solid;
    background-size: cover;
   border-color: transparent;
    
}

/* #Primary
================================================== */


::selection {
	color: var(--white);
	background-color: var(--black);
}
::-moz-selection {
	color: var(--white);
	background-color: var(--black);
}
mark{
	color: var(--white);
	background-color: var(--black);
}
.section {
    position: relative;
	width: 100%;
	display: block;
	text-align: center;
	margin: 0 auto;
}
.over-hide {
    overflow: hidden;
}
.z-bigger {
    z-index: 100 !important;
}


.background-color{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark-blue);
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox:checked ~ .background-color{
	background-color: var(--white);
}


[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
	position: relative;
	width: 70px;
	display: inline-block;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	margin: 17px 0;
	margin-top: 100px;
	height: 6px;
	border-radius: 4px;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
	position: absolute;
	font-family: 'unicons';
	cursor: pointer;
	top: -17px;
	z-index: 2;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox:not(:checked) + label:before {
	content: '\eac1';
	left: 0;
	color: var(--color-{{$plantillas2->id}});
	background-color: var(--dark-light);
	box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
	content: '\eb8f';
	left: 30px;
	color: var(--color-{{$plantillas2->id}});
	background-color: var(--dark-blue);
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.checkbox:checked ~ .section .container .row .col-12 p{
	color: var(--dark-blue);
}


.checkbox-tools-{{$plantillas2->id}}:checked + label{
	position: relative;
	display: inline-block;
	padding-left: 3px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-right: 1px;

	font-size: 1.4rem;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	/*text-transform: uppercase;*/
	color: var(--color-{{$plantillas2->id}});
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	width:300px;
	max-width: 100%;
}


.checkbox-tools-{{$plantillas2->id}}:not(:checked) + label{
	position: relative;
	display: inline-block;
	padding-left: 3px;
    padding-bottom: 20px;
    padding-right: 1px;
    padding-top: 20px;
	font-size: 1.4rem;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
		width:300px;
	max-width: 100%;
/*	text-transform: uppercase; */
	color: var(--color-{{$plantillas2->id}});
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}

.checkbox-tools-{{$plantillas2->id}}:not(:checked) + label{
	background-color: var(--white);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	border-width: 2px;
    border-style: solid;
    /*border-color: var(--color-{{$plantillas2->id}});*/
}
.checkbox-tools-{{$plantillas2->id}}:checked + label{
	background-image: url("{{$plantillas2->imagen_fondo}}");
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	border-width: 2px;
    border-style: solid;
    border-color: var(--light);
    background-size: cover;
}

.border-input{
    	border-width: 2px;
    border-style: solid;
    /*border-color: var(--color);*/
}

textarea {
  max-width: 100%;
}

.responsive-altura{
    position:relative;
    bottom: 100px;
}

.checkbox-tools-{{$plantillas2->id}}:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-tools-{{$plantillas2->id}}:checked + label::before,
.checkbox-tools-{{$plantillas2->id}}:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-image: linear-gradient(298deg, var(--azul), var(--azul));
	z-index: -1;
}
.checkbox-tools-{{$plantillas2->id}}:checked + label .uil,
.checkbox-tools-{{$plantillas2->id}}:not(:checked) + label .uil{
	font-size: 24px;
	line-height: 24px;
	display: block;
	padding-bottom: 10px;
}

.checkbox:checked ~ .section .container .row .col-12 .checkbox-tools:not(:checked) + label{
	background-color: var(--light);
	color: var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
	position: relative;
	display: inline-block;
	padding: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 260px;
	font-size: 52px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	/*text-transform: uppercase;*/
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	-webkit-text-stroke: 1px var(--white);
    text-stroke: 1px var(--white);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
}
.checkbox-budget:not(:checked) + label{
	background-color: var(--dark-light);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
	background-color: transparent;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
	position: relative;
	display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
	position: absolute;
	content: attr(data-hover);
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	-webkit-text-stroke: transparent;
    text-stroke: transparent;
    -webkit-text-fill-color: var(--white);
    text-fill-color: var(--white);
    color: var(--white);
	-webkit-transition: max-height 0.3s;
	-moz-transition: max-height 0.3s;
	transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
	max-height: 0;
}
.checkbox-budget:checked + label span::before{
	max-height: 100%;
}

.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
	background-color: var(--light);
	-webkit-text-stroke: 1px var(--dark-blue);
    text-stroke: 1px var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-booking:checked + label,
.checkbox-booking:not(:checked) + label{
	position: relative;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-ms-flex-pack: center;
	text-align: center;
	padding: 0;
	padding: 6px 25px;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 16px;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
    color: var(--white);
	/*text-transform: uppercase;*/
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-booking:checked + label::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:not(:checked) + label:hover::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:checked + label::before,
.checkbox-booking:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
}
.checkbox-booking:checked + label::after,
.checkbox-booking:not(:checked) + label::after{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:checked + label::after{
	opacity: 0;
}
.checkbox-booking:checked + label .uil,
.checkbox-booking:not(:checked) + label .uil{
	font-size: 20px;
}
.checkbox-booking:checked + label .text,
.checkbox-booking:not(:checked) + label .text{
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 300ms linear;
	transition: opacity 300ms linear;
}
.checkbox-booking:checked + label .text{
	opacity: 0.6;
}
.checkbox-booking:checked + label .text::after,
.checkbox-booking:not(:checked) + label .text::after{
	position: absolute;
	content: '';
	width: 0;
	left: 0;
	top: 50%;
	margin-top: -1px;
	height: 2px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label .text::after{
	width: 0;
}
.checkbox-booking:checked + label .text::after{
	width: 100%;
}

.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label{
	background-color: var(--light);
    color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label::after,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label::after{
	background-color: var(--light);
}




.link-to-page {
	position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20000;
    cursor: pointer;
    width: 50px;
}
.link-to-page img{
	width: 100%;
	height: auto;
	display: block;
}
</style>
@endforeach();
<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
  
    <!--end::Subheader-->
    <!--begin::Entry-->
   
                                
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <!--begin::Dashboard-->
            <!--begin::Row-->
            <div class="row">
             <div class="col-xl-3" id="todaspreguntas">
                    <!--begin::Tiles Widget 1-->
                    <div class="card card-custom gutter-b card-stretch" style="overflow-y: scroll;height: 70%;">
                        <!--begin::Header-->
                        
                        <div class="card-header border-0 pt-5">
                            <div class="card-title">
                                <div class="card-label">
                                    <div class="font-weight-bolder">{{ __('message.configurar_sidebar_title_create') }}</div>

                                </div>
                            </div>
                          
                            <!--div class="card-toolbar">
                           
                                <button type="submit" style="background:#008AA7;border-color:#008AA7;" class="btn btn-primary font-weight-bolder">
                
                
             
                        <span class="svg-icon svg-icon-md">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect x="0" y="0" width="24" height="24"></rect>
                            <circle fill="#000000" cx="9" cy="15" r="6"></circle>
                            <path d="M8.8012943,7.00241953 C9.83837775,5.20768121 11.7781543,4 14,4 C17.3137085,4 20,6.6862915 20,10 C20,12.2218457 18.7923188,14.1616223 16.9975805,15.1987057 C16.9991904,15.1326658 17,15.0664274 17,15 C17,10.581722 13.418278,7 9,7 C8.93357256,7 8.86733422,7.00080962 8.8012943,7.00241953 Z" fill="#000000" opacity="0.3"></path>
                        </g>
                    </svg>
                  
                </span>{{ __('message.boton_guardar_pregunta') }}  
                
                
                  </button>

                            </div-->
                            
                        
    
                        </div>
                        <!--end::Header-->
                        <!--begin::Body-->
                        
                        

                        <div class="card-body">
                            <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                
                                <div class="col-lg-12 col-sm-12 col-md col-xs-12 col-12 m-auto">
                                   <div class="row">
                                   <input type="hidden" name="idcuestionario" value="{{$idcuestionario}}"> 
                                   
                                 <div class="col-lg col-xs col-sm col-md  pb-5">
    <input class="checkbox-tools" type="radio" id="plantilla1" onclick="verbienvenida('{{$cuestionario->id}}');" name="bienvenida" value="{{$cuestionario->id}}" >           
  
      	<label class="for-checkbox-tools" for="plantilla1">
							<i class='uil uil-line-alt'></i>
							{{ __('message.cuestionario_configurar_label_2') }}
							 
						</label>

        </div>
        
        
                                @foreach($cuestionario_pregunta as $cuestionario_pregunta)
                                
                                <div class="col-lg col-xs col-sm col-md  pb-5">
    <input class="checkbox-tools-{{$cuestionario_pregunta->id}} preguntas-radio" onclick="verpregunta('{{$cuestionario_pregunta->id}}', '{{$cuestionario->id}}');" type="radio" id="plantilla-{{$cuestionario_pregunta->id}}" name="plantillas" value="{{$cuestionario_pregunta->id}}" >           
  
      	<label class="for-checkbox-tools-{{$cuestionario_pregunta->id}}" id="plantillalabel-{{$cuestionario_pregunta->id}}"  for="plantilla-{{$cuestionario_pregunta->id}}">
							
							 {{$cuestionario_pregunta->pregunta}}
							 
						</label>

        </div>
                                @endforeach()
                                        
          
                                </div> 
                                </div>
                                

                            </div>
                        </div>

                        <!--end::Body-->
                    </div>
                    <!--end::Tiles Widget 1-->
                </div> 
            <div class="col-xl-6">
                    <!--begin::Tiles Widget 1-->
                    <div class="card card-custom gutter-b card-stretch">
                        <!--begin::Header-->
                        
                        <div class="card-header border-0 pt-5">
                            <div class="card-title">
                                <div class="card-label">
                                    <div class="font-weight-bolder">{{ __('message.configurar_page_title_create') }}</div>

                                </div>
                            </div>
                          
                            <!---div class="card-toolbar">
                               
                                <a href="/" style="background:#008AA7;border-color:#008AA7;position: relative;right: 4%;" class="btn btn-primary font-weight-bolder">
                                    <span class="svg-icon svg-icon-md">
                                     
                                    </span>{{ __('message.boton_regresar') }} </a>
                                    
                               
                                <button type="submit" style="background:#008AA7;border-color:#008AA7;" class="btn btn-primary font-weight-bolder">
                
                
             
                        <span class="svg-icon svg-icon-md">
                    
                </span>{{ __('message.boton_guardar') }}  
                
                
                  </button>

                            </div-->
                            
                        
    
                        </div>
                        <!--end::Header-->
                        <!--begin::Body-->
                        
                        

                        <div class="card-body">
                            <div class="col-sm col-md col-lg col-xs" style="align:center;">
                                
                                 <div class="col col-xs-12 row" style="margin:0 0 20px 0 !important;background-color: whitesmoke;padding: 10px;">
			<div class="col-lg-1 col-xs-12">			
          <i style="font-size: 25px; margin-top: 50%;" class="fas fa-file-signature"></i>
          </div>	
          <div class="col-lg-11 col-xs-12">
         
    <p>Texto de ayuda</p>

          </div>
        </div>
        <br>
         <br>                     
          <div class="card-toolbar" style="text-align: center;">
                             
                                <button type="button" id="editar" style="background:#008AA7;border-color:#008AA7;position: relative;right: 4%;" class="btn btn-primary font-weight-bolder">
                        <span class="svg-icon svg-icon-md">
                </span>{{ __('message.boton_editar') }}  
                
                
                  </button>
                                
                                <button type="button" id="guardar" style="background:#008AA7;border-color:#008AA7;" class="btn btn-primary font-weight-bolder">
                        <span class="svg-icon svg-icon-md">
                </span>{{ __('message.boton_guardar') }}  
                
                
                  </button>

                            </div>
                            
                            <br>
                            <br>
                                <div class="col-lg-12 col-sm-12 col-md col-xs-12 col-12 m-auto">
                                   <div class="row">
                                   <div id="slider_bienvenida" class="col-lg-12 col-sm-12 col-md col-xs-12 col-12" style="background:url({{$cuestionario->imagen_bienvenida}});background-size: cover;padding:40px" >
                                       <section id='sec-text-1'  class="col-lg-12 col-sm-12 col-md col-xs-12 col-12">
                                           <input type="hidden" name='bienvenida_id' id="bienvenida_id" value="{{$cuestionario->id}}">
                                           <input type="hidden" name='bienvenida_activo' id="bienvenida_activo" value="1">
                                           <input type="hidden" name='pregunta_activo' id="pregunta_activo" value="0">
                                           <span id="textbienvenida" style="color:{{$cuestionario->txtcolor}}"> 
                                           {!! $cuestionario->texto_bienvenida !!}
                                           </span>
                                       </section>
                                       
                                       <section id='sec-text-2'  class="col-lg-12 col-sm-12 col-md col-xs-12 col-12">
                                           <textarea class="form-control"  name="bienvenida_cuestionario" id="body2">{!! $cuestionario->texto_bienvenida !!}</textarea>
                                       </section>
                                       
                                       <br>
                                       
                                       <section class="botonMobile" style="position:relative;left:35%;">
                                        <button class="btn  btn-lg" type="button" style="background: #4477F9;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);border-radius: 10px;">
                                            <a style="color:white;font-size: 1.3rem;text-decoration: none;" href="#">{{ __('message.boton_pregunta_1') }}</a></button>
                                        </section>
                                   </div>
                                   
                                   <div id="slider_preguntas" class="col-lg-12 col-sm-12 col-md col-xs-12 col-12" style="background-size: cover;padding:40px" >
                                       <section id='sec-pregunta-1'  class="col-lg-12 col-sm-12 col-md col-xs-12 col-12">
                                           <h1 style="text-align: center;" id="pregunta"></h1>
                                       </section>
                        
                                       <section id='sec-pregunta-2'  class="col-lg-12 col-sm-12 col-md col-xs-12 col-12">
                                        <textarea class="form-control" id="pregunta_text"  name="pregunta_text"></textarea>
                                       </section>
                                       
                                        <br>
                                        
                                        <section id="slider_reactivo" class="col-lg-12 col-sm-12 col-md col-xs-12 col-12">
                                        <div class="col-lg col-xs col-sm col-md  pb-5 row" id="reactivo_body">
                                            
                                        </div>
                                        </section>
                                        
                                        <section class="botonMobile" style="position:relative;left:35%;">
                                        <button class="btn  btn-lg" type="button" style="background: #4477F9;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);border-radius: 10px;">
                                            <a style="color:white;font-size: 1.3rem;text-decoration: none;" href="#">{{ __('message.boton_pregunta_2') }}</a></button>
                                        </section>
                                        
                                   </div>
                              
                                        
          
                                </div> 
                                </div>
                                
                                
                                

                            </div>
                        </div>

                        <!--end::Body-->
                    </div>
                    <!--end::Tiles Widget 1-->
                </div>
            <div class="col-xl-3">
                    <!--begin::Tiles Widget 1-->
                    
                    <div class="card card-custom gutter-b card-stretch">
                        <!--begin::Header-->
                        
                        <div class="card-header border-0 pt-5">
                            
                                <div class="card-label">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="diseno-tab" data-toggle="tab" href="#diseno" role="tab" aria-controls="diseno" aria-selected="true">{{ __('message.configurar_sidebar_title2_create') }}</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                <a class="nav-link" id="config-tab" data-toggle="tab" href="#config" role="tab" aria-controls="config" aria-selected="false">{{ __('message.configurar_sidebar_title3_create') }}</a>
                                </li>
                                </ul>

                                </div>
                       
                          
                            
                            
                        
    
                        </div>
                        <!--end::Header-->
                        <!--begin::Body-->
                        
                        

                        <div class="card-body" >
   
                            <div class="col-sm col-md col-lg col-xs" style="align:center;">
                                <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active col-lg-12 col-sm-12 col-md col-xs-12 col-12 m-auto" id="diseno" role="tabpanel" aria-labelledby="diseno-tab">
                                   <div class="card-toolbar" id="card-toolbar-preguntas">
                                <button type="submit" style="background:#008AA7;border-color:#008AA7;" class="btn btn-primary font-weight-bolder">
                        <span class="svg-icon svg-icon-md">
                        </span>{{ __('message.boton_guardar_2') }}  
                        </button>
                            </div>
                            <br>
                                <div class="row">
                                       
                                       
                              <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                  <div class="row">
                                     <div id="color_bienvenida_div" class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {!! __('message.cuestionario_configurar_label_1') !!}</strong> </label>
                                <input type="color" name="color_bienvenida" onchange="color_bienvenida_f(this.value)" id='color_bienvenida' class="form-control" value="#ff0000">
                                </div>  
                                </div>
                                
                                <div id="color_bienvenida_div_2" class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {!! __('message.cuestionario_configurar_label_8') !!}</strong> </label>
                                <input type="color" name="color_bienvenida" onchange="boton_textcolor_bienvenida(this.value)" id='color_bienvenida' class="form-control" value="#ff0000">
                                </div>  
                                </div>
                                
                                <div id="color_bienvenida_div_3" class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {!! __('message.cuestionario_configurar_label_9') !!}</strong> </label>
                                <input type="color" name="boton_color_bienvenida" onchange="boton_fondocolor_bienvenida(this.value)" id='color_bienvenida' class="form-control" value="#ff0000">
                                </div>  
                                </div>
                                
                                <div id="label_pregunta_1" class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                    <h4>Pregunta</h4> 
                                </div>
                                <div id="color_pregunta_div" class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {!! __('message.cuestionario_configurar_label_3') !!}</strong> </label>
                                <input type="color" onchange="color_preguntas(this.value)" name="color_pregunta" id='color_pregunta' class="form-control" value="#ff0000">
                                </div>  
                                </div> 
                                    
                                
                                <div id="label_pregunta_2" class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                    <h4>Opciones</h4> 
                                </div>
                                <div id="color_border_opciones_div" class="col-lg-6 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {!! __('message.cuestionario_configurar_label_4') !!}</strong> </label>
                                <input type="color" name="color_border_opciones" onchange="color_border_opciones_f(this.value)" id='color_border_opciones' class="form-control" value="#ff0000">
                                </div>  
                                </div>
                                
                                 <div id="color_fondo_opciones_div" class="col-lg-6 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {!! __('message.cuestionario_configurar_label_5') !!}</strong> </label>
                                <input type="color" name="color_fondo_opciones" onchange="color_fondo_opciones_f(this.value)" id='color_fondo_opciones' class="form-control" value="#ff0000">
                                </div>  
                                </div>
                                
                                 <div id="color_border_opciones_checked_div" class="col-lg-6 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {!! __('message.cuestionario_configurar_label_6') !!}</strong> </label>
                                <input type="color" name="color_border_opciones_checked" onchange="color_border_opciones_checked_f(this.value)" id='color_border_opciones_checked' class="form-control" value="#ff0000">
                                </div>  
                                </div>
                                
                                 <div id="color_fondo_opciones_checked_div" class="col-lg-6 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label><strong> {!! __('message.cuestionario_configurar_label_7') !!}</strong> </label>
                                <input type="color" name="color_fondo_opciones_checked" onchange="color_fondo_opciones_checked_f(this.value)" id='color_fondo_opciones_checked' class="form-control" value="#ff0000">
                                </div>  
                                </div> 
                                  </div>
                                 
                              </div>
                              
                              <div  id="fondo_imagen_bienvenida" class= "col-lg-12 col-sm-12 col-md-12 col-xs-12" >
                                <div class= "col-lg-12 col-sm-12 col-md-12 col-xs-12" id="image-preview3" >
                                <label style='width: 0px;' for="imagenportada"><strong></strong></label>
                                <img   title="{{ __('message.cuestionario_label_9') }}" src ="{{$cuestionario->imagen_bienvenida}}" id="mostrarImagen3" class="img-responsive">
                                </div>
                                <br>
                                <label for="subir_imagen"  class="btn btn-primary pull-left">{{ __('message.cuestionario_label_6') }} <br>{{ __('message.cuestionario_label_8') }}</label>
                                <form action="{{url('imagenbienvenida')}}" method="post" enctype="multipart/form-data">
                                     @csrf 
                                 <input  type="file" style="visibility:hidden;"  name="imagenbienvenida" id="subir_imagen"/>   
                                 <input type="hidden" name='bienvenida_id' id="bienvenida_id" value="{{$cuestionario->id}}">
                                <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                <button type="submit" style="background:#008AA7;border-color:#008AA7;" class="btn btn-primary font-weight-bolder">
                                {{ __('message.boton_guardar_upload') }}  
                                </button> 
                                </div>
                                 </form>
                                </div>
                                
                                <div id="fondo_imagen_preguntas"  class= "col-lg-12 col-sm-12 col-md-12 col-xs-12" >
                                <div class= "col-lg-12 col-sm-12 col-md-12 col-xs-12" id="image-preview3" >
                                <label style='width: 0px;' for="imagenportada"><strong></strong></label>
                                <img title="{{ __('message.cuestionario_label_9') }}" src="{{$cuestionario->imagen_bienvenida}}" id= "mostrarImagen_bg" class=img-responsive >

                                </div>
                                <br>
                                <label for="subir_imagen_bg"  class="btn btn-primary pull-left">{{ __('message.cuestionario_label_7') }} <br>{{ __('message.cuestionario_label_8') }}</label>
                                 <form action="{{url('imagencuestionario')}}" method="post" enctype="multipart/form-data">
                                     @csrf 
                                <input type="hidden" name='pregunta_id' id="pregunta_id" value="">     
                                <input  type="file" style="visibility:hidden;"  name="imagencuestionario" id="subir_imagen_bg" tabindex="8" />
                                 <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                <button type="submit" style="background:#008AA7;border-color:#008AA7;" class="btn btn-primary font-weight-bolder">
                                {{ __('message.boton_guardar_upload') }}  
                                </button> 
                                </div>
                                 </form>
                                </div>
                                  
                                
          
                                </div> 
                                </div>
                                
                                <div class="tab-pane fade col-lg-12 col-sm-12 col-md col-xs-12 col-12 m-auto" id="config" role="tabpanel" aria-labelledby="config-tab">
                                   <div class="row">
                                       <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label> {{ __('message.pregunta_label_2') }} </label>
                                <select name="tipo_pegunta" id="tipo_pegunta" required class="form-control">
                                    <option value="">Selecciona el tipo de pregunta</option>
                                   
                                </select>
                                </div>  
                                </div>
                                
                                <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <label> Numero de pregunta </label>
                                <select name="tipo_pegunta" id="tipo_pegunta" required class="form-control">
                                    <option value="">1</option>
                                   
                                </select>
                                </div>  
                                </div>
                                
                                <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                  <div class="form-group">
                                <button type="submit" style="background:red;border-color:red;" class="btn btn-primary font-weight-bolder">
                        <span class="svg-icon svg-icon-md">
                        </span>Eliminar Pregunta 
                        </button>
                                </div>  
                                </div>
                                
                                   </div> 
                                </div>
                            </div>
                                
                                

                            </div>
                        </div>

                        <!--end::Body-->
                    </div>
                    <!--end::Tiles Widget 1-->
                </div>     

            </div>

            <!--end::Dashboard-->
      
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
    
</div>
<!--end::Content-->



@include('plantillas.footer')

<script>
    $("#tipo_pegunta").change(function() {
    var tipo_pegunta= $("#tipo_pegunta").val();  
    if(tipo_pegunta=='3'){
        $('#opciones').hide();
        }
    if(tipo_pegunta==''){
        $('#opciones').hide();
        }
    if(tipo_pegunta=='1' || tipo_pegunta=='2' ){
        $('#opciones').show();
        }    
});
    
</script>

<script>
 $(document).ready(function() {
     $('#opciones').hide();
     $('#slider_preguntas').hide();
     $('#slider_reactivo').hide();
     $('#color_pregunta_div').hide()
     $('#label_pregunta_1').hide();
     $('#label_pregunta_2').hide();
     $('#fondo_imagen_preguntas').hide();
     $('#color_border_opciones_div').hide();
     $('#color_fondo_opciones_div').hide();
     $('#color_border_opciones_checked_div').hide();
     $('#color_fondo_opciones_checked_div').hide();
     $('#card-toolbar-preguntas').hide();
     $('#sec-text-2').hide();
     $( '#guardar' ).attr( 'disabled', 'disabled' );

    
    
 $( '#btnAdd' ).click( function() {
     
		var num = $( '.clonedInput' ).length;		// how many "duplicatable" input fields we currently have
		var newNum	= new Number( num + 1 );		// the numeric ID of the new input field being added
		var newElem = $( '#input' + num ).clone().attr( 'id', 'input' + newNum );
		console.log(num);
		newElem.children( ':first' ).attr( 'id', 'name' + newNum ).attr( 'name', 'name' + newNum );
		$( '#input' + num ).after( newElem );
		$( '#btnDel' ).attr( 'disabled', false );
		if ( newNum == 10 )
			$( '#btnAdd' ).attr( 'disabled', 'disabled' ); 
	});
	
	$( '#btnDel' ).click( function() {
		var num = $( '.clonedInput' ).length;		// how many "duplicatable" input fields we currently have
		$( '#input' + num ).remove();				// remove the last element
		$( '#btnAdd' ).attr( 'disabled', false );	// enable the "add" button
		
		// if only one element remains, disable the "remove" button
		if ( num-1 == 1 )
			$( '#btnDel' ).attr( 'disabled', 'disabled' );
	});
			
	$( '#btnDel' ).attr( 'disabled', 'disabled' );

});


$( '#editar' ).click( function() {
   var bienvenida_activo = $('#bienvenida_activo').val();
   var pregunta_activo = $('#pregunta_activo').val();
    if(bienvenida_activo==1){
    $('#sec-text-2').show();
    $('#sec-text-1').hide();
	$( '#guardar' ).attr( 'disabled', false );  
    }
    
    if(pregunta_activo==1){
    $('#sec-pregunta-1').hide();
    $('#sec-pregunta-2').show();
	$( '#guardar' ).attr( 'disabled', false );  
    }
    
	});
	$( '#guardar' ).click( function() {
   var bienvenida_activo = $('#bienvenida_activo').val();
   var pregunta_activo = $('#pregunta_activo').val();
   
    if(bienvenida_activo==1){
    var bienvenida = CKEDITOR.instances['body2'].getData();
    var idcuestionario = $('#bienvenida_id').val();
    var url= "<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function env() in /home/sistemex/public_html/suite/services/resources/views/cuestionario/configurar.blade.php:1976
Stack trace:
#0 {main}
  thrown in <b>/home/sistemex/public_html/suite/services/resources/views/cuestionario/configurar.blade.php</b> on line <b>1976</b><br />