@font-face {
    font-family: 'HostGrotesk';
    src:  url('fonts/HostGrotesk-VariableFont_wght.ttf')  format('truetype');
}

html{
	font-family: 'HostGrotesk';
	overflow-x: hidden !important;
}

a{
	text-decoration: none;
}

header{
	background-color: #f75628;
	margin-top: 30px;
	padding: 0;
	border-radius: 100px;
}

header *, header *:hover{
	color: white;
}

header .col-md-12{
	padding: 0;
}

header ul{
	display: flex;
  align-items: center;
  margin-bottom: 0;
  list-style: none;
}

.flex_{
	display: flex;
}

header .flex_{
	align-items: center;
}

img{
	max-width: 100%;
	display: block;
}

.logo{
	height: 40px;
}

body *{
	 font-family: 'HostGrotesk';
}

.mb_10{
	margin-bottom: 10px;
}

.mb_60{
	margin-bottom: 60px;
}

.mt_40{
	margin-top: 40px;
}

.mt_25{
	margin-top: 25px;
}

.fs-14{
	font-size: 14px;
}

.fs-16{
	font-size: 16px;
}

header .flex_.a_{
background-color: #e2e2e2;
  width: 34%;
  border-radius: 100px;
  padding: 20px 40px;
    padding-right: 40px;
  padding-right: 50px;
}

header .flex_.b_{
	width: 66%;
	justify-content: space-between;
}


header .btn{
	background-color: #1a4392;
	color: white !important;
	margin-right: 20px;
	border-radius: 100px;
  padding: 10px 20px;
}

header ul a{
	text-decoration: underline;
	margin-right: 20px;
}

.recopilar_1, .recopilar_2{
	display: flex;
  align-items: center;
}

.publicar_{
	display: flex;
	padding-right: 20px;
}

.sect-01{
	padding-top: 90px;
}

input, textarea{
display: block;
  margin-bottom: 20px;
  width: 100%;
  border-radius: 100px;
  border: 0;
  padding: 14px 30px;
  font-size: 20px;
  font-weight: 300;
  color: #595959
}

select{
	 border-radius: 100px;
  border: 0;
  padding: 14px 30px;
  font-size: 20px;
  font-weight: 300;
  color: #595959;
  background-color: white;
}

textarea{
	height: 140px;
  border-radius: 20px;
}

input::placeholder, textarea::placeholder, .textarea_ div{
	color: #A3A3A3;
}

.textarea_{
	position: relative;
}

.preguntas .textarea_, .preguntas .limite, .preguntas .tog_, .p_opciones{
	max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}



.preguntas .tog_{
	margin-bottom: 15px;
  display: flex;
  align-items: center;
  padding-top: 10px;
}

.textarea_ div{
	font-weight: 300;
	bottom: 20px;
	right: 20px;
	position: absolute;
  font-size: 14px;
}

.encuesta{
	background-color: #f4f4f4;
	padding: 50px;
  border-radius: 20px;
  margin-top: 30px;
  color: #595959;
  font-size: 20px;
  font-weight: 300;
}

.sect-02 .encuesta {
  margin-top: 35px;
  margin-bottom: 35px;
}

.tipo_opcion{
	display: flex;
}

.tipo_opcion a{
	display: block;
	background-color: white;
}



.tipo_opcion a.act{
	background-color: #1982c4;
}

.flex_.a_ span{
	color: #1a4391;
  font-weight: 900;
  font-size: 22px;
  margin-left: 25px;
}

.ver img{
	height: 20px;
}

.flex_i{
	display: flex;
  align-items: center;
}

.flex_i img{
	margin-right: 10px;
}

h2{
	color: #595959;
  font-weight: 700;
  font-size: 38px;
}

section{
	padding-top: 90px;
}

.tit_sec{
	background-color: #f8552a;
  color: white;
  border-radius: 100px;
}

.tit_sec div{
	background-color: #ff924d;
  max-width: max-content;
  font-size: 30px;
  border-radius: 100px;
  padding: 15px 40px;
  font-weight: 700;
}

section .container_inner{
	padding-left: 80px;
  padding-right: 80px;
}

.eliminar{
 position: absolute;
  top: 20px;
  right: 20px;
}

.eliminar img{
	height: 20px;
}

.toggle-handle {
  background-color: white !important;
  border-radius: 100px;
  width: 28px;
  height: 28px;
  
  margin-top: 5px;
}

.toggle.btn {
  border-radius: 100px;
  background-color: transparent !important;
  border: 0 !important;
  width: 75px !important;
  margin-right: 10px;
  height: 38px !important;
}

.toggle-on{
	background-color: #8ac826;
	font-size: 0;
	border: 0 !important;
	border-color: #8ac826;
	border-radius: 100px !important;
}

.btn-primary:hover {
  background-color: #8ac826;
}

.toggle-off{
	background-color: #ff585f;
	font-size: 0;
	border: 0 !important;
	border-radius: 100px;
}

.toggle .toggle-group {
  padding-right: 35px;
}

.toggle.off .toggle-group {
  padding-left: 35px;
  padding-right: 0px;
}

.recopilar_2{
	margin-top: 15px;
}

.hide{
	display: none;
}

.limi_ input{
	background-color: white !important;
  color: #595959 !important;
  max-width: 60px !important;
  display: inline !important;
}

.limite{
	display: flex;
	margin-top: 5px;
	align-items: center;
	margin-bottom: 25px;
}

input[type="number"]{
background-color: white;
  color: #595959;
  max-width: 65px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 7px 12px;
  text-align: center;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  margin-bottom: 0;
}

.pregunta h3{
	font-weight: 800;
	margin-bottom: 17px;
	position: relative;
	padding-left: 32px;
}

.pregunta h3 .puntos{
	position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.pregunta h3 span:not(.num_){
	font-size: 20px;
}


.agregar_p1{
	background-color: #194292;
	color: white;
	display: flex;
  align-items: center;
  cursor: pointer;
}

.agregar_p:hover .agregar_p2{
	display: block;
}

.agregar_p2{
	padding: 20px;
	display: none;
}

.agregar_p1 img{
width: 20px;
  margin-left: 30px;
  margin-right: 40px;
}

.agregar_p1 div{
background-color: #1982c4;
  padding: 14px 40px;
    padding-right: 40px;
  padding-right: 35px;
  padding-right: 35px;
  padding-right: 55px;
  font-weight: 300;
}

.agregar_p, .agregar_p1, .agregar_p2, .agregar_p div, .agregar_p a{
	border-radius: 100px;
}

.agregar_p a{
	display: block;
  font-size: 16px;
  padding: 13px 25px;
  color: #595959;
}

.agregar_p a:hover {
  color: #595959;
  background-color: #a3a3a3;
  color: white;

}

.agregar_p{
	margin-top: 35px;
	background-color: #f4f4f4;
	font-size: 20px;
	border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  max-width: max-content;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.rayas{
	cursor: pointer;
	position: absolute;
  left: 0;
  top: 5px;
}

.regla{
	background-color: #f4f4f4;
  padding: 20px 0px;
  border-radius: 20px;
  margin-top: 30px;
  color: #595959;
  font-size: 20px;
  display: flex;
  justify-content: start;
  position: relative;
  align-items: center;
}

.diseno{
	background-color: #f4f4f4;
	padding: 45px;
	 border-radius: 20px;
	 margin-top: 30px;
	  color: #595959;
	  font-size: 20px;
}

.diseno h4{
	font-size: 22px;
  font-weight: 800;
  margin-bottom: 30px;
}

.diseno select, .diseno input{
	margin-left: 20px;
}

.disenos > div{
	padding-top: 15px;
	padding-bottom: 15px;
	display: flex;
  align-items: center;
}

.disenos input[type="number"] {
  background-color: white;
  color: #595959;
  max-width: 65px;
  padding: 7px 5px;
}

.cp-buttons .btn-close{
	background: none !important;
	background-color: #f8552a !important;
  color: white;
  width: initial;
  line-height: initial;
  height: initial;
  padding: 10px;
  opacity: 1;
}

.regla input{
	margin-bottom: 0;
}

.regla input, .regla select{
	max-width: 65px;
  margin-left: 0;
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;
  color: #595959;
}

.eliminar_r{
	position: absolute;
  right: 0;
}

.regla .eliminar_r img{
	height: 20px;
}

.regla{
	margin-top: 20px;
}

.regla:nth-of-type(1){
	margin-top: 0px;
  padding-top: 0;
}

.opciones{
background-color: #f4f4f4;
  padding: 0;
    padding-bottom: 0px;
  border-radius: 20px;
  margin-top: 10px;
  color: #595959;
  font-size: 20px;
  margin-bottom: 0px;
  padding-bottom: 30px;
  padding-top: 30px;
}

.pregunta .limite {
  margin-bottom: 5px;
}

.pregunta .opciones{
	padding: 0 25px;
	padding-top: 20px;
	padding-bottom: 10px;
}

.opcion_correcta{
	font-size: 16px;
  background-color:  #e2e2e2;
  color: white;
  padding: 12px 16px;
  border-radius: 100px;
  margin-left: 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.opcion_correcta.act, .opcion_correcta:hover, .opcion_correcta.orden_{
	background-color: #8bc926;
}

.opcion .rayas{
	position: initial;
}

.opciones_s.p_opciones .opcion::before {
  left: 55px;
}

.p_opciones .orden_ input{
	width: 55px !important;
  padding: 5px 5px;
  font-size: 17px;
  margin-right: 0 !important;
}

.tog_.radio_{
	display: block !important;
}

.tog_.radio_ div{
	display: flex;
  align-items: center;
}

.p_opciones .opcion .opcion_correcta img{
	height: 18px;
  padding: 0;
  margin-right: 12px;
}

.diseno .opciones{
	padding: 0;
}

.opciones div{
	display: flex;
  align-items: center;
  margin-top: 13px;
  margin-bottom: 13px;
}

input[type="radio"]{
	width: initial;
	margin-bottom: 0;
	margin-right: 20px;
}

label {
  padding: 4px;
}
/* Target labels that have a radio input as child. */
label:has(input[type=radio]) {
display: grid;
  flex-direction: row;
  align-items: center;
  background: #ff585f;
  width: 20px;
  height: 20px;
  margin-right: 15px;
  border-radius: 100px;
}
/* Change label background when the child element is checked. */
label:has(input[type=radio]:checked) {
  background: #89c925;
}
/* Apply focus outline when the child element has focus. */
label:has(input[type=radio]:focus-visible) {
  outline: 1ps solid blue;
}
/* Hide the actual radio input and place it on top of the label. */
input[type=radio] {
  position:absolute;
  opacity: 0;
}

.tit_sec span{
	font-size: 20px;
}

.diseno select {
         font-size: 20px;
  padding: 10px 20px;
  margin-top: 0px;
  width: max-content;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

#range-slider, #range-slider2 {
  width: 200px;
  margin-bottom: 0;
}

.restaurar{
	color: #595959;
  font-size: 20px;
  text-decoration: underline;
}

.sect-06{
	padding-bottom: 80px;
}

blockquote{
	text-align: left;
}

code{
	white-space: normal;
  text-align: left;
}

.opcion input{
	font-size: 15px;
}

.p_opciones{
	border-left: 3px solid #cdcdcd;
  padding-left: 20px;
  margin-left: 90px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.p_opciones .opcion{
	margin-top: 12px;
}

.p_opciones .opcion:nth-of-type(1){
	margin-top: 0px;
}

.p_opciones input{
  margin-bottom: 0px;
  width: 300px;
  padding-left: 40px;
}

.p_opciones .opcion{
	position: relative;
	display: flex;
	align-items: start;
}

.opcion_input div{
	border: 7px solid white;	
  border-top: 20px solid white;
  margin-top: -20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.opcion_input div img{
	height: 50px;
  padding: 12px !important;
  margin: 12px auto;
}

.opcion .eliminar{
	left: 255px;
  right: initial;
  top: 0;
}

.texto:not(.act) img{
	height: 44px !important;
  margin-top: 2px;
}

.tipo_opcion{
	margin-left: 15px;
}

.p_opciones .opcion img{
	height: 50px;
  padding: 15px;
}

.p_opciones .opcion .texto{
	border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.p_opciones .opcion .imagen{
	border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.p_opciones .opcion::before{
	display: block;
  height: 15px;
  width: 15px;
  content: '';
  position: absolute;
  background-color: #1982c4;
  border-radius: 100px;
  left: 15px;
  top: 18px;
}

.modal-content {
  border-radius: 20px;
}

#eliminar_opcion .modal-body, #modal_publicar .modal-body, #eliminar_regla .modal-body, #eliminar_pregunta .modal-body{
	padding: 30px;
  color: #595959;
  font-size: 20px;
  font-weight: 300;
}

.botones_modal .btn{
	color: white;
  font-size: 20px;
  font-weight: 300;
  padding: 8px 5px;
  border-radius: 100px;
  margin: 10px 5px;
  width: 80px;
  text-align: center;
  background-color: #89c925;
}

.agregar_o{
	margin-top: 13px;
}

input[type="file"]{
	opacity: 0;
	position: absolute;
	left: -1000px;
}

.contenedor_img{
	background-position: center;
	background-size: cover;
}

.contenedor_img.act a{
	opacity: 0;
  pointer-events: none;
}

.agregar_o img{
	height: 45px;
}



.botones_modal  .btn.btn_no{
	background-color: #fe595d
}

.editar_imagen a:not(.eliminar_i){
	background-color: #1982c4;
  color: white;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 100px;
  font-weight: 300;
}

.p_opciones .editar_imagen .eliminar_i img{
	padding: 0 !important;
  height: 20px;
  margin: 0 !important;
    margin-right: 0px;
  margin-right: 8px !important;
}

.opcion_input div.editar_imagen{
	background-color: white;
  display: flex;
  align-items: center;
}

.editar_imagen{
	display: none !important;
  align-items: center;
  border-top: 0 !important;
  padding-top: 12px;
  background-color: white !important;
  margin-top: 10px !important;
}

.contenedor_img.act .editar_imagen a {
  opacity: 1;
  pointer-events: initial;
}

.act .editar_imagen{
  display: flex !important;
}

code{
	color: #595959 !important;
  font-size: 20px !important;
  font-weight: 300;
}

.menu_{
background-color: #1982c4;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 16px;
  width: 175px;
  position: absolute;
  right: 6px;
  top: 51px;
  z-index: 100;
}

.menu_ a{
	font-size: 16px;
  color: white;
  font-weight: 300;
  display: block;
  padding: 16px 20px;
  border-radius: 100px;
  position: initial;
}

.menu_ a:hover{
	background-color: #1a4392;
}

.menu_pregunta{
	display: none;
}

.menu_pregunta::before{
	top: -18px;
  right: -1px;
  background-image: url('../img/border.png');
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
}

.input-group {
  position: relative;
  display: flex;
  border-collapse: separate;
}

.input-group-addon {
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: #55595c;
  text-align: center;
  background-color: #eceeef;
  border: 1px solid #ccc;
}

.form-control::placeholder {
  color: #999;

  opacity: 1;

}

.disenos div.cpBG{
	display: block;
	margin: 0;
}

body .cp-values input {
  line-height: 12px;
  width: 35px;
  font-weight: 400;
  font-style: normal;
  margin-left: 0;
  display: initial;
  border-radius: initial;
  border: 1px solid;
  padding: 0;
  background-color: white;
  font-size: 14px;
  margin-bottom: 3px;
  border-radius: 100px !important
}

body .input-group-addon{
 border-radius: 100px !important;
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 100;
  right: 6px;
  top: 7px;
}

body .cp-cont .form-control{
  color: #55595c;
  background-color: #fff;
  background-image: none;
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 300;
  border-radius: 100px  !important;
  border: 0  !important;
  margin-left: 20px !important;
  max-width: 140px;
  width: initial;
  padding: 10px 18px;
}

.sect-04 .col-md-12 > .recopilar_1{
	padding-top: 20px;
  font-size: 20px;
  font-weight: 300;
  margin-top: 25px;
}

#range-slider, #range-slider2{
	padding: 0 !important;
	appearance: none;
  -webkit-appearance: none;
  height: 5px;
  background: linear-gradient(to right, #007BFF 0%, #007BFF var(--value-percent, 0%), #ccc var(--value-percent, 0%), #ccc 100%);
  border-radius: 5px;
  outline: none;
  margin-bottom: 0;
}

#range-slider::-webkit-slider-thumb, #range-slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #007BFF;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

#range-slider::-moz-range-thumb, #range-slider2::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #007BFF;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.cpBG {
  z-index: 10000 !important;
}

.caja_1{
	color: #A3A3A3;
	background-color: white;
	border-radius: 100px;
	width: 250px;
  padding: 10px 25px;
  max-width: 100%;
  margin-right: 20px;
  font-size: 17px;
  font-weight: 300;
  border: 0;
}


.caja_2.btn_, .caja_2{
	background-color: #F8562A;
	color: white;
	border-radius: 100px;
  padding: 10px 25px;
  max-width: max-content;
  font-size: 17px;
  font-weight: 300;
  border: 0 !important;
}

.caja_2{
	background-color: #5d5db3;
	width: 250px;
	max-width: 100%;
}

.caja_b{
	color: #595959 !important;
  border: 2px solid #c6c6c6;
  height: 110px;
  border-radius: 25px;
}

#codigo_modal a.copiar{
background-color: #1982c4;
  font-size: 20px;
  font-weight: 300;
  color: white;
  border-radius: 100px;
  padding: 15px 25px;
  margin-left: auto;
  display: flex;
  max-width: max-content;
  margin-top: 20px;
  align-items: center
}

#codigo_modal a.copiar img{
	height: 25px;
	margin-right: 10px;
}

#codigo_modal .modal-header {
  border-bottom: 0;
  font-size: 20px;
  font-weight: 700;
  color: #595959;
}

.close{
	opacity: 1 !important
}

#codigo_modal .modal-content {
  border-radius: 20px;
  padding: 30px;
    padding-top: 30px;
  padding-top: 20px;
}

header .menu_ {
  width: 225px;
  right: 40px;
  top: 70px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 75px;
  height: 38px;
  margin-right: 12px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff585f;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 29px;
  width: 29px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #8ac826;
}

input:focus + .slider {
  box-shadow: 0 0 1px #8ac826;
}

input:checked + .slider:before {
  -webkit-transform: translateX(38px);
  -ms-transform: translateX(38px);
  transform: translateX(38px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.color_div{
	position: relative;
}

.color_div span{
color: rgb(85, 89, 92);
  font-size: 17px;
  font-weight: 300;
  position: absolute;
  z-index: 10;
  top: 9px;
  right: 43px;
}

input[type="color"]{
	background-color: white;
	margin-bottom: 0;
	padding: 0;
	height: 42px;
	width: 140px;
	position: relative;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}


::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  
  ::-webkit-color-swatch {
    border: 0;
	width: 32px;
	height: 32px;
    border-radius: 100px 100px 100px 100px;
	right: 6px;
	top: 5px;
  position: absolute;
  }
  
  ::-moz-color-swatch {
    border: 0;
	width: 32px;
	height: 32px;
    border-radius: 100px 100px 100px 100px;
	right: 6px;
  position: absolute;
  }


@media(max-width: 1000px){
	section .container_inner {
  padding-left: 0px;
  padding-right: 0px;
}
.tit_sec div {
  font-size: 22px;
}
h2 {
  font-size: 34px;
}
header ul, .ver, .guardado{
	display: none;
}
.flex_.a_ span {
  font-size: 18px;
  margin-left: 20px;
}
header .flex_.a_ {
  width: 60%;
}
header .flex_.b_ {
  width: 40%;
}
.sect-01 {
  padding-top: 60px;
}
section {
  padding-top: 60px;
}
header .flex_.a_ {
  background-color: #e2e2e2;
  border-radius: 100px;
  padding: 15px 20px;
  padding-right: 40px;
  padding-right: 30px;
}

}

.preguntas{
	overflow: auto;
}

@media(max-width: 768px){
	section .container_inner {
	  padding-left: 10px;
	  padding-right: 10px;
	}
	.encuesta {
	  padding: 30px;
	  font-size: 19px;
	}
	.tit_sec div {
	  font-size: 19px;
	}
	 .flex_.a_ span {
    font-size: 16px;
    margin-left: 20px;
  }
  .pregunta h3 {
  font-size: 20px;
}
.pregunta h3 span:not(.num_) {
  font-size: 17px;
}
.rayas {
  top: 0px;
}
.pregunta h3 .puntos {
  top: -5px;
  cursor: pointer;
}
.opciones div {
  font-size:  17px;
}
label:has(input[type="radio"]) {
  width: 16px !important;
  height: 16px;
  margin-right: 15px;
  border-radius: 100px;
  min-width: 16px;
}
.diseno {
  background-color: #f4f4f4;
  padding: 30px;
  border-radius: 20px;
  font-size: 19px;
}
.diseno select, input, textarea, .regla {
  font-size: 19px;
}
.tit_sec div {
  font-size: 18px;
  border-radius: 100px;
  padding: 10px 30px;
}
.p_opciones {
  margin-left: 20px;
}
.p_opciones input {
  margin-bottom: 0px;
  width: 200px;
  padding-left: 40px;
}
.opcion .eliminar {
  left: 155px;

}
.regla{
	max-width: 100%;
  overflow: auto;
  gap: 10px;
}
.regla input, .regla select {
  width: 149px;
}
.agregar_p1 div {
  background-color: #1982c4;
  padding: 12px 35px;
  font-weight: 300;
  font-size: 19px;
}
header .btn {
  background-color: #1a4392;
  color: white !important;
  margin-right: 8px;
  padding: 8px 14px;
  font-size: 14px;
}
.publicar_ {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
 .flex_.a_ span {
    font-size: 14px;
    margin-left: 15px;
  }
header {
  margin-top: 15px;
}
.opciones {
  background-color: #f4f4f4;
  padding: 20px 20px;
}
input[type="range"] {
  padding-left: 0;
  padding-right: 0;
  width: 170px !important;
}

}

@media(max-width: 500px){
	 header .flex_.a_ {
    padding: 12px 15px;
    padding-right: 15px;
  }
  .encuesta {
	  padding: 25px;
	  font-size: 17px;
	}
	h2 {
    font-size: 28px;
  }
    .diseno select, input, textarea, .regla {
    font-size: 17px;
  }
    .agregar_p1 div {
    font-size: 17px;
  }
    .diseno {
    font-size: 17px;
  }
    .pregunta h3 {
    font-size: 18px;
  }
  .pregunta h3 span:not(.num_) {
    font-size: 16px;
  }
  .preguntas .textarea_, .preguntas .limite, .preguntas .tog_, .p_opciones {
  max-width: 98%;
}
}

@media(min-width: 768px){
	#codigo_modal .modal-dialog{
		max-width: 800px;
	}
	
}