<style>
	.ul-welcome {
		display:flex;
		top:0px;
		z-index:10;
		padding-bottom:14px;
	}
	.il-welcome {
		list-style:none;
		flex:1;
	}
	.il-welcome:last-child {
		border-right:1px solid #DDD;
	}
	.welcome-button {
		width:100%;
		border: 1px solid #DDD;
		border-right:0;
		border-top:0;
		padding: 10px;
		background:#FFF;
		font-size:14px;
		font-weight:bold;
		height:60px;
		color:#999
	}
	.il-welcome.active button {
		background:#F5F5F5;
		color:#000;
	}
	.welcome-table { border-collapse:collapse; table-layout:fixed; width:100%; }
	.welcome-th { background:#F5F5F5; display:none; }
	.welcome-td, .welcome-th {
		height:53px
	}
	.welcome-td,.welcome-th { border:1px solid #DDD; padding:10px; empty-cells:show; }
	.welcome-td,.welcome-th {
		text-align:left;
	}
	.welcome-td+.welcome-td, .welcome-th+.welcome-th {
		text-align:center;
		display:none;
	}
	td.default {
		display:table-cell;
	}
	.bg-purple {
		border-top:3px solid #A32362;
	}
	.bg-blue {
		border-top:3px solid #0097CF;
	}
	.sep {
		background:#F5F5F5;
		font-weight:bold;
	}
	.txt-l { font-size:28px; font-weight:bold; }
	.txt-top { position:relative; top:-9px; left:-2px; }
	.tick { font-size:18px; color:#2CA01C; }
	.hide {
		border:0;
		background:none;
	}

	@media (min-width: 640px) {
		.ul-welcome {
			display:none;
		}
		.welcome-td,.welcome-th {
			display:table-cell !important;
		}
		.welcome-td,.welcome-th {
			width: 330px;

		}
		.welcome-td+.welcome-td, .welcome-th+.welcome-th {
			width: auto;
		}
	}
</style>
<?php if (isset( get_plugin_updates()['stylish-cost-calculator/stylish-cost-calculator.php'] ) && get_plugin_updates()['stylish-cost-calculator/stylish-cost-calculator.php']->update->new_version !== get_plugin_updates()['stylish-cost-calculator/stylish-cost-calculator.php']->Version) : ?>
<p class="free_version update-message notice inline notice-error notice-alt">This plugin needs to be updated. Please <a href="<?php echo admin_url('plugins.php#stylish-cost-calculator-update'); ?>">click here</a> to update the plugin</p>
<?php endif; ?>
<?php
$opt=get_option('scclk_opt');
if(empty($opt)){
	echo '<p class="free_version">You are using the <span class="highlighted">free</span> version of the plugin. Click <span class="highlighted"><a href="https://stylishcostcalculator.com/">here</a></span> to buy the premium version.</p>';
}else{
	echo '<p class="free_version" style="background-color:#DC143C;color:white;min-width: 100%!important;">You are using a deprecated version of Stylish Cost Calculator <span class="highlighted">Premium</span>. <a href="https://members.stylishcostcalculator.com/instructions/" target="_blank" style="color:white;font-weight:bold;text-decoration: underline;">Please click here to upgrade.</a></p>';
}
$info = array();

$info['WP_MAX_MEMORY_LIMIT'] = array(
	'label' => 'WP_MAX_MEMORY_LIMIT',
	'value' => WP_MAX_MEMORY_LIMIT,
);
$info = apply_filters( 'debug_information', $info );

$memoryLimit = -1;
foreach ( $info as $section  ) {
	if($section['label'] == 'WP_MAX_MEMORY_LIMIT') {
		if(strpos($section['value'], 'M') !== false){
			$memoryLimit =(int) explode("M", $section['value'])[0];
		}
	}
}
if($memoryLimit > -1 && $memoryLimit < 256){
	echo '<p class="free_version" style="background-color:#DC143C;color:white;min-width: 100%!important;">You have a '.$memoryLimit.'MB memory limitation on your server. To make sure the email quote feature of this plugin will work correctly, you should increase this limit <span class="highlighted">to 256M. <a href="https://designful.freshdesk.com/a/solutions/articles/48001141896" target="_blank" style="color:white;font-weight:bold;text-decoration: underline;">Learn more here.</a></p>';
}
?>

<div class="row">
	<div class="col-xs-12 pane-left">  <!-- This affects the size of the main container -->
		<div class="scc_wrapper"><div style="clear: both;" id="previewInputsAdd" class="scc_wrapper"></div></div>
		<div class="hover_bkgr_fricc">
			<span class="helper"></span>
			<div>
				<div class="popupCloseButton" href="javascript:void(0)" onClick="ClosePopup()">x</div>
				<b id="hover_bkgr_fricc_message">You cannot add more than three sections items; However, you might able add more subsections or more elements within the currenct sections & subsections. <br> Purchase the pro version <a href="https://stylishcostcalculator.com/">here</a>. </b>
			</div>
		</div>
		<div style="clear: both;"></div>
		<div id="themainwarning"></div>
		<div id="scc-demover" data-demo="<?php echo get_option('scc_licensed');?>" style="text-align: center;"></div>
		<div id="allinputstoadd" class="col-xs-6 col-lg-12 col-md-12" style="max-width: 1000px; padding-left:0px !important;padding-right: 0;"> </div>  <!-- This affects the size of the main input containers -->
		<div style="max-width:1000px;" class="row">
			<label class="col-xs-12 col-lg-12 col-md-12 add-section-btn">
				<a href="javascript:void(0)" onClick="addAnotherField()" style="padding:8px;background:#314af3;color:white;border-radius: 6px;" class="crossnadd2 scc_new_sec">+ Add Section </a>
			</label>
		</div>

		<div style="display: none" id="inputtoadd">
			<div class="addedFieldsStyle" style="display:grid;">

				<div id="title54-bar-btns">
					<button id="settings-btn" class="btnn material-icons" href="javascript:void(0)" onClick="accordionIconClick(this)" style="line-height: 40px; float: left; margin-left: 25px;">settings</button>
					<div class="scc-accordion-container scc-accordion-tooltip-hidden" style="display:inline-block;width: 50%">
						<div class="scc-accordion-tooltip-left-arrow" <?php echo isset($form_field_style) && $form_field_style == 'style_1' ? 'style="top: -22px;"' : 'style="top: -22px;"'?>></div>
						<div class="scc-accordion-tooltip scc-accordion-content">
							<p>
								<label class="scc-accordion_switch_button">
									<input class="scc_accordion_section" name="scc_accordion_section"  type="checkbox" value="yes">
									<span class="scc-accordion_toggle_button round"></span>
								</label>
								Accordion
							</p>
							<p>
								<label class="scc-accordion_switch_button">
									<input class="scc-section-total" name="scc-section-total"  type="checkbox">
									<span class="scc-accordion_toggle_button round"></span>
								</label>
								Show Section Total
							</p>
						</div>
					</div>
					<button id="close-btn" class="btnn material-icons" href="javascript:void(0)" onClick="removeField(this)" style="line-height: 34px;width: 39px">close</button>
					<button id="down-btn" class="btnn material-icons down" style="display: none; line-height: 34px;width: 39px;" href="javascript:void(0)" onClick="rdown(this)">arrow_drop_down</button>
					<button id="up-btn" class="btnn material-icons up" style="display: none; line-height: 34px;width: 39px;" href="javascript:void(0)" onClick="rup(this)">arrow_drop_up</button>
				</div>
				<!--<button class="collapsible" style="font-size:18px;">Section</button>-->

				<div id="title54-bar">
					<div id="title54">
						<div style="vertical-align: middle; margin-left:4px">
							<input type="text" class="input_pad sectiontitle" placeholder="Section Title" value="" style="border: none !important;box-shadow: none !important; outline: 0;border-raduis:10px;margin-top: 20px;width: 350px;height: 50px;margin-left:13px;margin-bottom:10px;display:none" required />

							<span class="mandatory" style='display:none'>*</span>
						</div>
					</div>
				</div>
				<div class="title_section_no_edit_container" style="margin-top:30px;">
					<div class="scc-col-md-1" style="padding:0px;margin-right:5px;">
						<img style="cursor: pointer" onClick="toggleEditTitle(this)" src="<?php echo SCC_URL . '/assets/images/pen-blue.png' ?>" width="15" />
					</div>
					<div class="scc-col-md-11" style="padding:0px;">
						<p style="margin-top:-8px; font-size: 24px" class="title_section_no_edit"></p>
					</div>
				</div>

				<!--<label class="scc_label" style="padding: none; width: 40%; float: left;margin-top: 5px;">Section Description </label>-->
				<textarea class="input_pad sectionDescription" placeholder="Description of the products/services that will be listed below. (Optional)" style="background: #fff;border-raduis:10px;height:125px;padding: 15px;width: 95%;margin-left: 22px;margin-bottom:20px;margin-top:15px;display: none"> </textarea>
				<div class="description_section_no_edit_container" style="margin-top:10px">
					<div class="col-md-1" style="padding:0px;">
						<img style="margin-top:-20px; cursor: pointer" onClick="toggleEditDescription(this)" src="<?php echo SCC_URL . '/assets/images/pen-blue.png' ?>" width="15" />
					</div>
					<div class="col-md-11" style="padding:0px;">
						<p  style="margin-top:-8px; font-size: 14px" class="description_section_no_edit"></p>
					</div>

				</div>
				<!-- ADD SUBSECTION -->
				<div class="fieldDatatoAdd">
					<div class="boardOption1" style="">
						<label class="add-subsection-btn">
							<a href="javascript:void(0)" onClick="addAnotherElement(this)" style="border-radius: 6px;padding:8px;border:1px solid #314af3;color:#314af3" class="crossnadd2 scc_new_subsec">+ Add Subection </a>
						</label>
					</div>
				</div>
			</div>
		</div>
		<!--- ********************************************************************************************************************************* -->
		<!-- <label class="scc_label col-xs-12 col-md-2" style="text-align: left;padding-top:40px;">
			<a class="scc_button" href="javascript:void(0)" onClick="saveFields()">SAVE</a>
		</label> -->
		<!--- ********************************************************************************************************************************* -->
		<!--- ADD SUBSECTION -->
		<div style="display: none">
			<div id="fieldDatatoAdd">
				<div class="boardOption1" style="">
					<label class="add-subsection-btn">
						<!-- This one works -->
						<a href="javascript:void(0)" onClick="addAnotherElement(this)" class="crossnadd2" style="border-radius:6px;padding:8px;background:#314af3;color:white">+ Add Subsection </a>
					</label>
				</div>
			</div>
			<div id="fieldDatatoAdd11">
				<!--<hgroup class="speech-bubble">
					<div class="AnimCloseButton" href="javascript:void(0)" onClick="ClosePopup1()">x</div>
					<div style="line-height: 15px;">
					<b>PRO TIP</b>
					<br> Everything in this <b>Subsection</b> will effect the total price.
					<br><b>Example:</b> a slider quantity will be multiplied by dropdown or checkbox in the same <b>section.</b>
					</div>
				</hgroup>-->
				<div class="boardOption">
					<div class="scc_subsection">
						<button id="close-btn" class="collapsible" href="javascript:void(0)" onClick="removeField1(this)" style="float:right; font-size:20px;" >x</button>
						<button class="collapsible subsect-title" style="">Subsection </button>
						<div class="scc_help_btn_right" style="left:26px;float:right;top:23px;font-size:18px;"><a href="#" style="padding-left:10px;color:black;" class="tooltipadmin-right" data-tooltip="Use subsections to control which elements a slider has an effect on. Note: you are only allowed one slider per subsection. Sliders are linked to any elements in the same subsection. Example: If you select 10 units with the slider, it will add 10 units to any dropdown or checkbox element above it. If you want to unlink them, make sure the slider sits in its own subsection."> <img src="<?php echo SCC_URL . '/assets/images/info-icon-scc.png'; ?>" alt="Info Icon" height="15px;"> </a></div>
					</div>
					<div style="clear: both;"></div>
					<div style="clear: both;"></div>
					<div class="subsection-area BodyOption">
					</div>
					<!--
						<li class='form-line'>
						<div class="BodyOption">
						<label class="scc_label" style="padding-left: 20px;width:30%;text-align:left;">Input Type</label>
						<select onchange="getFieldOptionx(this)" style="width:50%;min-width:50%;margin-top:20px;" class="getfieldoptionx ">
						<option value=""></option>
						<option value="dropdowninput">Dropdown Menu</option>
						<option value="switchinput">Checkbox</option>

						</select>
						<div style="clear: both;"></div>
						<div style="clear: both;"></div>
						</div>
						</li>
						<div id="title5400-bar-btns" class="buttonclass11">

						<button id="min-btn" class="crossnadd" href="javascript:void(0)" onClick="addAnotherOption(this)" style="border: none;">+ Add A Dropdown, Checkbox or Switch</button>
						</div>
						<div id="title54-bar" style="">
						<div id="title5400" style="" class="buttonclass11">
						<span style="vertical-align: middle; ">
						<input class="inputoption_slidchk" type="checkbox" onClick="addSlider(this)"  style="display:none;"/>
						<button id="min-btn" class="crossnadd" href="javascript:void(0)" onClick="addSlider(this)" style="border: none;">+ Add A Slider</button>
						</span>
						</div>
						</div>
					-->
					<div class="selslideropt_3" style="display:none;">

						<div style="clear: both;"></div>
						<div class="selslideropt_4" style="background-color:#FFF;margin:0px 20px 20px 20px;border-top:1px solid #eee;">
							<!-- Slider Title ( THIS ONE ) --->
							<div style="padding-bottom:20px;">
								<button id="close-btn" class="collapsible" href="javascript:void(0)" onclick="removeSlider(this)" style="">x</button>
								<button class="collapsible" style="text-align:center; font-size:18px;padding-top:10px;"> Slider Element</button>
								<button class="collapsible" href="javascript:void(0)" data-collapse-section-type="slider_element" onclick="colla(this)" style="width:10%;">-</button>
								<i class="material-icons has-tooltip" style="cursor: pointer;float:right;font-size: 22px;margin-right: 50px;margin-top: 26px;margin-left: -24px; color: #C0C0C0;" title="Slider Element cannot be copied, only one is allowed per subsection.">content_copy</i>
							</div>
							<div class="slider-section-container">
								<div class="edit-element-notice">
									<i class="material-icons with-tooltip" title="Note: Sliders are linked to any elements in the same subsection. Example: If you select 10 units with the slider, it will add 10 units to any dropdown or checkbox element above it. If you want to unlink them, make sure the slider sits in its own subsection.">info</i>
								</div>
								<div class="col-md-12 col-xs-12" style="padding:0px;">
									<div class="col-xs-3 col-md-3" style="padding:0px;background:#f8f9ff;height:40px;">
										<span class="scc_label" style="text-align:right;padding-right:10px;margin-top:5px;">Title</span>
									</div>
									<div class="col-xs-9 col-md-9" style="padding:0px;background:#f8f9ff;">
										<input type="text" class="input_pad sliderinputoption_T" style="height:40px;text-align:left;max-width:100%;width:100%;border-color: #f8f9ff;" value="" />
									</div>
								</div>
								<div class="col-md-12 col-xs-12" style="margin-top:10px;padding:0px;">
									<div class="col-xs-3 col-md-3" style="padding:0px;background:#f8f9ff;height:40px;">
										<span class="scc_label" style="margin-top:5px;text-align:right;padding-right:10px;">Step</span>
									</div>
									<div class="col-xs-9 col-md-9" style="padding:0px;text-align:left;">
										<input type="text" class="input_pad slidoption_3" value="1" style="text-align:center;height:40px;width:50px"  />
									</div>
								</div>
								<div class="col-md-12 col-xs-12" style="margin-top:10px;padding:0px;">
									<div class="col-xs-3 col-md-3" style="padding:0px;background:#f8f9ff;height:40px;">
										<span class="scc_label" style="margin-top:5px;text-align:right ;padding-right:10px;">Starting number</span>
									</div>
									<div class="col-xs-9 col-md-9" style="padding:0px;text-align:left">
										<input type="text" class="input_pad slidoption_4" value="1" val="1" style="text-align:center;height:40px;left:-8px;width:50px;" />
									</div>
								</div>
								<div class="col-md-12 col-xs-12" style="margin-top:10px;padding:0px;">
									<div class="col-xs-3 col-md-3" style="background:#f8f9ff;height:40px;margin-top:10px;padding-left: 15px;">
										<span class="scc_label tooltipadmin-right" style="text-align:right;padding-right:5x;margin-top:5px;" data-tooltip="Bulk Pricing: Between 1 and 10 = $100 per unit price | Sliding Scale: 1 and 10 = $100 flat price" >Pricing Structure</span>
									</div>
									<div class="col-xs-9 col-md-9" style="padding:0px;text-align:left">
										<select class="slider-discount-type" style="margin-top:10px;width:100%;max-width:100%;float:left;height:40px;">
											<option value="bulk-pricing">Bulk Pricing</option>
											<option value="sliding-scale">Sliding Scale</option>
										</select>
									</div>
								</div>
								<!-- Start Price Range -->
								<div style="clear: both;"></div>
								<div style="height:auto;background-color:white;display:table;">
									<div style="padding: 5px; margin:5px;" style="height:auto;">
										<table class="price_table col-md-12" cellpadding="0" cellspacing="0" style="background:;margin-left: 63px!important;">
											<caption style="background:;text-align: left;padding-left:10px;margin-bottom:-33px;margin-left:-84px;font-size:14px;" class="scc_label">Price Range</caption>
											<thead>
												<tr>
													<th><label class="scc_label  col-xs-2 col-md-2" style="padding-left:20px;font-size:12px;">From</label></th>
													<th><label class="scc_label  col-xs-2 col-md-2" style="padding-left:10px;font-size:12px;">To</label></th>
													<th><label class="scc_label  col-xs-2 col-md-2" style="padding-left:10px;font-size:12px;">Price</label></th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<th><input type="number" min=0 class="scc_label input_pad sliderinputoption `	`scc_input" value="0" style="width:90PX;height:40px;margin-left:12px;padding:6px;" align="center" /></th>
													<th><input type="number" min=0 class="scc_label  input_pad sliderinputoption_2 scc_input" value="100" style="width:90PX;height:40px;margin-left:12px;padding:6px;" align="center" /></th>
													<th><input type="number" min=0 class="scc_label  input_pad sliderinputoption_5 scc_input" value="1" style="width:90PX;height:40px;margin-left:12px;padding:6px;" align="center" /></th>
													<th>
														<label style="width: 10%;font-size: 15px;"></label>
													</th>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<!-- End of Price Range -->

								<div class="col-lg-12 col-md-12 col-xs-12 add-price-option-slider" style="margin-bottom: 0;margin-top:30px;">
									<a href="javascript:void(0)" onClick="addNewRange(this)" class="crossnadd" style="color:#314af3;font-size: 13px;">+ Add Price Range</a>
								</div>
								<div class="scc-new-accordion-container" style="background-color:#FFF;padding: 0;">
									<div class="styled-accordion">
										<div class="scc-title">
											<i class="material-icons">keyboard_arrow_right</i><span>Advanced Options</span>
										</div>
										<div class="scc-content">
											<div class="scc-transition hidden">
												<span style="text-align: left;display: block;"><b>Responsive Options</b></span>
												<div class="scc-accordion-tooltip" style="width: 95%; text-align:left;">
													<div class="text-scc-col d-flex tooltipadmin-right" data-tooltip="Please enter a number between 1 and 12. 1 being the smallest and 12 being the largest, for your title. If you have a large title, we recommend between 6 and 12.">
														<div class="col-md-9" style="padding:1px;">
															<label>Title column (desktop)</label>
														</div>
														<div class="col-md-3" style="padding:1px;">
															<input  class="scc_title_column_dskp_slider" name="scc_title_column_dskp_slider"  type="text">
														</div>
													</div>
													<div class="text-scc-col d-flex">
														<div class="col-md-9" style="padding:1px;">
															<label>Title column (mobile)</label>
														</div>
														<div class="col-md-3" style="padding:1px;">
															<input  class="scc_title_column_mobl_slider" name="scc_title_column_mobl_slider"  type="text">
														</div>
													</div>

												</div>
												<p>
													<label class="scc-accordion_switch_button tooltipadmin-right" data-tooltip="To get this feature, please become Premium. Thank you">
														<input class=" scc_accordion_section slidoption_5"  type="checkbox" disabled>
														<span class="scc-accordion_toggle_button round"></span>
													</label>
													<span><b>Show price hint</b></span>
												</p>
											</div>
										</div>
									</div>
								</div>
								<div class="warning"></div>
							</div>
						</div>
					</div>
<!--
	custom math
-->
<div class="col-md-12 col-xs-12" style="">
	<label class="scc_label_2" style="margin-top:15px;margin-right: 0px !important;padding:8px;background:#314af3;border-radius: 6px;">
		<a style="color:white" class="add-element-btn save_button " href="javascript:void(0)" onclick="addElementButton(this)">
			+ Add Element
		</a>
	</label>
</div>
<div class="col-md-12 col-xs-12" style="margin:15px; display: none">

	<span sty;e="font-size:10px;margin-bottom:5px;">Add 1 or more elements by clicking the blue buttons</span><br>
	<button value ="dropdowninput" onclick="getFieldOptionx(this, -1)" class="scc_button btn-backend"><i class="far fa-list-alt" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text">DropDown</div></button>
	<!-- <button value ="switchinput" onclick="getFieldOptionx(this, 1)" class="scc_button btn-backend"><i class="far fa-dot-circle" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text">Radio Button</div></button> -->
	<!-- <button value ="switchinput" class="scc_button btn-backend" onclick="getFieldOptionx(this, 5)"><i class="fas fa-circle" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text">Radio Button 2</div></button> -->
	<button value ="switchinput" class="scc_button btn-backend" onclick="getFieldOptionx(this, 2)"><i class="far fa-check-square" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text">Checkbox</div></button>
	<button value ="switchinput" class="scc_button btn-backend" onclick="getFieldOptionx(this, 7)"><i class="fas fa-toggle-off" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text" >Toggle Switch</div></button>
	<!-- <button value ="switchinput" class="scc7button btn-backend" onclick="getFieldOptionx(this, 4)"><i class="fas fa-toggle-on" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text" >Toggle Switch Circ</div></button> -->
	<button value ="switchinput" class="scc_button btn-backend" onclick="getFieldOptionx(this, 6)"><i class="far fa-rectangle-wide" style="margin-top:5px;font-size:13px;width:26px;height: 9px;background-color: white;"></i> <div class="btn-backend-text" >Simple Button </div></button>
	<button class="scc_button btn-backend" onclick="addSlider(this)"><i class="fas fa-sliders-h" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text">Slider</div></button>
	<input class="inputoption_slidchk" type="checkbox" onClick="addSlider(this)"  style="display:none;"/>
	<button value ="comment_input" class="scc_button btn-backend" onclick="getFieldOptionx(this, 7)"><i class="fas fa-comment" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text" >Comment Box</div></button>
	<button value ="number_input" class="scc_button btn-backend" onclick="getFieldOptionx(this, 8)"><i class="material-icons" style="padding-top:3px;font-size:13px;">exposure</i><div class="btn-backend-text" >Number Box</div></button>
	<?php if(get_option('scc_licensed') != 0) {
		?>
		<button class="scc_button btn-backend" onclick="addCustomMath(this)"><i class="fas fa-calculator" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text">Custom Math</div></button>
		<input class="scc_custom_math_checkbox" type="checkbox"  style="display:none;"/>
	<?php }else{
		?>
		<button class="scc_button btn-backend" class="tooltipadmin-right" data-tooltip="This feature is only available in Premium version."><i class="fas fa-calculator" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text">Custom Math</div></button>
		<button value="file_input" class="scc_button btn-backend" data-tooltip="This feature is only available in Premium version."><i class="fas fa-paperclip" style="padding-top:3px;font-size:13px;"></i> <div class="btn-backend-text">File Upload</div></button>
		<?php
	}
	?>




</div>
<div class="scc_custom_math"  style="display:none;">
	<div style="background-color:#FFF;margin:20px;padding: 15px;">
		<div style="padding-bottom:20px;">
			<button id="close-btn" class="collapsible" href="javascript:void(0)" onclick="removeCustomMath(this)" style="">x</button>
			<button class="collapsible" style="text-align:center; font-size:20px;padding-top:10px;"> Custom Math</button>
			<div class="scc_help_btn_right" style="float:right;width:10%; top: 45px"><a href="#" style="padding-left:10px;color:black;top:-22px;right:-12px;" class="tooltipadmin-right" data-tooltip="Sliders are linked to any elements in the same subsection. Example: If you select 10 units with the slider, it will add 10 units to any dropdown or checkbox element above it. If you want to unlink them, make sure the slider sits in its own subsection."> <img src="<?php echo SCC_URL . '/assets/images/info-icon-scc.png'; ?>" alt="Info Icon" height="16px;"> </a></div>
		</div>
		<!-- Accordion starts -->
		<div class="selopt5 col-xs-12 col-md-12" >
			<div class="scc-col-xs-12 scc-col-md-12 scc-col-lg-12">

				<div style="cursor:pointer; min-height: 15px;">
					<div onClick="accordionIconClick(this)">
						<span style="display: inline-block;height: 100%;vertical-align: middle;"></span>
						<img style="position: absolute;top: 0;bottom: 0px;left: 93px; margin: auto;" src="<?php echo SCC_URL . '/assets/images/settings-gear-scc-1.png' ?>" height="15px" />
					</div>
					<div class="scc-accordion-container scc-accordion-tooltip-hidden" style="display:inline-block; margin-left: 30px;width: 90%">
						<div class="scc-accordion-tooltip-left-arrow" style="float:left; margin-left: 70px; margin-top:20px;"></div>
						<div class="scc-accordion-tooltip" style="width: 60% !important; text-align:left !important; float:left">
							<div style="font-weight:100">
								<div class="col-md-9" style="padding:1px">
									<label style="font-weight: normal !important;">Display on Front End</label>
								</div>
								<div class="col-md-3" style="padding:1px;margin-top:4px">
									<input  class="scc_custom_math_display_front_end" name="scc_custom_math_display_front_end"  type="checkbox" checked value="<?php ?>">
								</div>
							</div>
							<div >
								<div class="col-md-9" style="padding:1px">
									<label style="font-weight: normal !important;">Display on Detailed List</label>
								</div>
								<div class="col-md-3" style="padding:1px;margin-top:4px">
									<input  class="scc_custom_math_display_detailed_list" name="scc_custom_math_display_detailed_list"  type="checkbox" checked value="<?php ?>">
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Accordion ends -->
		<div style="padding-top:30px;"></div>
		<div class="col-md-12 col-xs-12" style="padding:0px;">
			<div class="col-xs-3 col-md-3" style="padding:0px;background:#f8f9ff;height:40px;">
				<span class="scc_label" style="text-align:right;padding-right:10px;margin-top:5px;">Name</span>
			</div>
			<div class="col-xs-9 col-md-9" style="padding:0px;background:#f8f9ff;">
				<input type="text" class="input_pad scc_custom_math_name" style="height:40px;text-align:left;max-width:100%;width:100%;border-color: #f8f9ff;" value="" />
			</div>
		</div>

		<div class="col-md-12 col-xs-12" style="margin-top:10px;padding:0px;">
			<div class="col-xs-3 col-md-3" style="padding:0px;background:#f8f9ff;height:40px;">
				<span class="scc_label" style="margin-top:5px;text-align:right;padding-right:10px;">Type</span>
			</div>
			<div class="col-xs-9 col-md-9" style="padding:0px;padding:0px;text-align:left;">
				<select class="input_pad scc_custom_math_type"  style="text-align:center;height:40px;width:150px; padding: 1px!important;text-align-last: center;font-size: 17px;"  >
					<option value="+"><strong>+</strong></option>
					<option value="-"><strong>-</strong></option>
					<option value="x"><strong>x</strong></option>
					<option value="%"><strong>%</strong></option>
				</select>
			</div>
		</div>
		<div class="col-md-12 col-xs-12" style="margin-top:10px;padding:0px;">
			<div class="col-xs-3 col-md-3" style="padding:0px;background:#f8f9ff;height:40px;">
				<span class="scc_label" style="margin-top:5px;text-align:right ;padding-right:10px;">Value</span>
			</div>
			<div class="col-xs-9 col-md-9" style="padding:0px;text-align:left">
				<input type="number" class="input_pad scc_custom_math_value" style="text-align:center;height:40px;left:-8px;width:150px;" />
			</div>
		</div>

		<!-- Start Price Range -->
		<div class="warning"></div>
		<div style="clear: both;"></div>
	</div>
</div>

<!--
	custom math
-->
</div><!-- test  2-->
</div> <!-- test 1 -->

</div test="">

<div id="titledescdiv" style="display: none">
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onClick="removeField2(this)" style="width:10%;">x</button>
	<button class="collapsible">Fix Selection</button>
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onclick="colla(this)" style="width:10%;">-</button>
	<div class="content" value="titledescdiv">
		<label class="scc_label  col-xs-6 col-md-3" style="margin-top:15px;padding-right:5px;">Product/Service </label>
		Mandatory <input type="text"  class="col-xs-12 col-md-5 input_pad sliderinputoption_T" style="margin-top:5px;" value="" />
		<label class="scc_label  " style="width: 40%;margin-bottom:10px;">Price</label>
		<input type="number" min=0 class="input_pad descinputoption" value="100" style="width: 40%;margin-bottom:10px;" align="center" />
	</div>
</div>
<!-- Start of Checkbox, Toggle or Button Element -->
<div id="switchoption" style="display: none" >
	<hr style="margin:1px;">
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onClick="removeField2(this)">x</button>
	<button class="collapsible" style="padding:0px;font-size:18px">Checkbox / Toggle / Button </button>
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onclick="colla(this)">-</button>
	<img class="sortable_subsection_element" style="cursor: pointer;  float:right;margin-right:30px;margin-top:30px;margin-left:-50px;" src="<?php echo esc_url(SCC_URL . '/assets/images/drag-symbol.svg') ?>" height="15px" />
	<i class="material-icons" onclick="javascript:handleElementCopy(this)" style="cursor: pointer;float:right;font-size: 22px;margin-right: 50px;margin-top: 26px;margin-left: -24px;">content_copy</i>
	<div class="content" value="switchoption" >
		<!-- start of style-->
		<div class="scc-col-xs-12 scc-col-md-12" style="margin-top: 30px;padding:0px;">
			<div class="scc-col-xs-3 scc-col-md-3" style="padding:0px;background: #f8f9ff;height: 40px;">
				<span class="scc_label " style="text-align:right;padding-right: 10px;margin-top:5px;">Style</span>
			</div>
			<div class="scc-col-xs-9 scc-col-md-9" style="padding:0px;">
				<select class="fieldFormat" style="width:100%;max-width:100%;padding:6px;height:40px;border-color:#f8f9ff;">
					<option value="" placeholder="Checkbox style"></option>
					<option value="6">Simple Buttons</option>
					<option value="1">Checkbox (circle) (Animated 1)</option>
					<option value="5">Checkbox (circle) (Animated 2)</option>
					<option value="2">Checkbox (Animated)</option>
					<option value="3">Toggle Switch (Rectangle)</option>
					<option value="4">Toggle Switch (Circle)</option>
					<option value="7">Radio (Single Choice)</option>
				</select>
			</div>
			<span class="col-xs-6 col-md-7"></span>
		</div>
		<!-- end style chooser-->
		<div class="switchoption_2" style="">
			<div class="col-xs-12 col-md-12 switchoption_3" style="margin-top: 20px;">
				<div class="scc-vcenter">
					<div class="col-xs-2 col-md-2 tooltipadmin-left" id="switchopt" data-tooltip="Click to make this option default." style="padding:0px;background:#f8f9ff;height:40px;" onClick="setDefaultOption(this)">
						<label class="" style="float: none;margin-top:10px;font-size:14px;font-weight: normal;">XXYYXX</label>
					</div>
					<div class="scc-col-xs-10 scc-col-md-10" style="padding:0px;">
						<div class="scc-col-md-8 scc-col-xs-8" style="padding:0px;padding-right:5px;">
							<input type="text" placeholder="Product or service name" class="input_pad switchinputoption " value="" style="height:40px;padding:8px;width:100%;" align="center" required />
						</div>
						<div class="scc-col-xs-3 scc-col-md-3" style="padding:0px;padding-right:5px;">
							<input type="number" min=0 class="input_pad switchinputoption_2" value="100" style="width:100%;height:40px;text-align:center;" align="center" />
						</div>
						<div class="scc-col-xs-1 scc-col-md-1" style="padding:0px;">
							<button class="" style="width:100%;padding:0px;height:40px;border: 1px solid #f8f9ff;" onclick="removeSwitchOption(this)" >X</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-12 col-md-12 col-xs-12" style="padding: 10px;margin-bottom: 4px;margin-top: 15px;text-align:center;">

		</div>
		<a href="javascript:void(0)" onClick="addAnotherSwitch(this)" class="crossnadd" style="width:60%; margin-top: 5px;">[+] Add A Product / Service Option </a>
		<div class="warning" style=""></div>
		<div class="scc-new-accordion-container">
			<div class="styled-accordion">
				<div class="scc-title">
					<i class="material-icons">keyboard_arrow_right</i><span>Advanced Options</span>
				</div>
				<div class="scc-content">
					<div class="scc-transition hidden">
						<span style="text-align: left;display: block;"><b>Responsive Options</b></span>
						<div class="scc-accordion-tooltip" style="width: 95%; text-align:left;">
							<div class="text-scc-col d-flex tooltipadmin-right"   data-tooltip="Please enter a number between 1 and 12. 1 being the smallest and 12 being the largest, for your title. If you have a large title, we recommend between 6 and 12.">
								<div class="col-md-9" style="padding:1px">
									<label>Title column (desktop)</label>
								</div>
								<div class="col-md-3" style="padding:1px">
									<input  class="scc_title_column_dskp_chkbx" name="scc_title_column_dskp_chkbx"  type="text" value="<?php ?>">
								</div>
							</div>
							<div class="text-scc-col d-flex">
								<div class="col-md-9" style="padding:1px">
									<label>Title column (mobile)</label>
								</div>
								<div class="col-md-3" style="padding:1px">
									<input  class="scc_title_column_mobl_chkbx" name="scc_title_column_mobl_chkbx"  type="text" value="<?php ?>">
								</div>
							</div>
						</div>
						<p>
							<label class="scc-accordion_switch_button tooltipadmin-right" data-tooltip="Makes choosing atleast one of the checkbox/button/toggle to be checked">
								<input class="scc-scc_accordion_section" name="chkbx-mandatory" type="checkbox">
								<span class="scc-accordion_toggle_button round"></span>
							</label>
							<span><b>Mandatory</b></span>
						</p>
						<p>
							<label class="scc-accordion_switch_button tooltipadmin-right" data-tooltip="To get this feature, please become Premium. Thank you">
								<input class="scc-scc_accordion_section" name="chkbx-showhint" type="checkbox" disabled>
								<span class="scc-accordion_toggle_button round"></span>
							</label>
							<span><b>Show price hint</b></span>
						</p>
					</div>
				</div>
			</div>
			<div class="styled-accordion">
				<div class="scc-title">
					<i class="material-icons">keyboard_arrow_right</i><span>Conditional Logic</span>
				</div>
				<div class="scc-content">
					<div class="scc-transition hidden">
						<p>
							<label class="scc-accordion_switch_button tooltipadmin-right" data-tooltip="To get this feature, please become Premium. Thank you">>
								<input class="scc_conditioned_dropdown" name="scc_conditioned_dropdown" type="checkbox" disabled>
								<span class="scc-accordion_toggle_button round"></span>
							</label>
							<span><b>Enable conditional element</b></span>
						</p>
						<div class="condition-container"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- End of Checkbox, Toggle or Button Element -->
<!-- start of A-Slider Element NOT USED ?? -->
<div id="AsliderOption" style="display: none">
	<hr style="margin:1px;">
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onClick="removeField2(this)" style="width:10%;">x</button>
	<button class="collapsible">Range Selection</button>
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onclick="colla(this)" style="width:10%;">-</button>
	<img class="sortable_subsection_element" style="cursor: pointer;  float:right;margin-right:30px;margin-top:25px;margin-left:-50px;" src="<?php echo esc_url(SCC_URL . '/assets/images/drag-symbol.svg') ?>" height="15px" />
	<i class="material-icons" onclick="javascript:handleElementCopy(this)" style="cursor: pointer;float:right;font-size: 22px;margin-right: 50px;margin-top: 26px;margin-left: -24px;">content_copy</i>
	<div class="content" value="AsliderOption">
		<div class="selslideropt_4">
			<label class="scc_label  col-xs-12 col-md-4" style="margin-top:15px;">Slider Name</label>
			<input type="text" class="col-xs-12 col-md-5 input_pad sliderinputoption_T" style="margin-top:5px; width:270px" value="" />
			<div style="clear: both;"></div>
			<div style="padding: 5px; margin:5px;">
				<caption style="text-align: center;" class="scc_label" style="padding-top:20px;">Price Range</caption>

				<table class="price_table" cellpadding="0" cellspacing="0" style="width: 80%">

					<thead>
						<tr>
							<th><label class="scc_label  col-xs-6 col-md-2">From</label></th>
							<th><label class="scc_label  col-xs-6 col-md-2">To</label></th>
							<th><label class="scc_label  col-xs-6 col-md-2">Price</label></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th><input type="number" min=0 class="input_pad sliderinputoption" value="0" style="width: 50%;" align="center" /></th>
							<th><input type="number" min=0 class="input_pad sliderinputoption_2" value="100" style="width: 50%;" align="center" /></th>
							<th><input type="number" min=0 class="input_pad sliderinputoption_5" value="1" style="width: 50%;" align="center" /></th>
							<th>
								<lable style="width: 10%;font-size: 15px;"></lable>
							</th>
						</tr>
					</tbody>
				</table>
			</div>
			<div col-lg-12 col-md-12 col-xs-12 style="text-align:center;">
				<a href="javascript:void(0)" onClick="addNewRange(this)" class="crossnadd material-icons" style="font-size: 15px;">library_add</a>
			</div>
		</div>
	</div>
	<div class="warning"></div>

</div>
<!-- End of A-Slider Element -->
<!-- start of Button Element -->
<div id="buttonoption" style="display: none">
	<hr style="margin:1px;">
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onClick="removeField2(this)" style="width:10%;">x</button>
	<button class="collapsible">Simple Buttons</button>
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onclick="colla(this)" style="">-</button>
	<img class="sortable_subsection_element" style="cursor: pointer;  float:right;margin-right:30px;margin-top:30px;margin-left:-50px;" src="<?php echo esc_url(SCC_URL . '/assets/images/drag-symbol.svg') ?>" height="15px" />
	<i class="material-icons" onclick="javascript:handleElementCopy(this)" style="cursor: pointer;float:right;font-size: 22px;margin-right: 50px;margin-top: 26px;margin-left: -24px;">content_copy</i>
	<div class="selopt5 col-xs-12 col-md-12" style="margin-top:20px;">
		<label class="scc_label  col-xs-6 col-md-4" style="margin: -2px 30px 25px;text-align:center;">Title</label>
		<input type="text" class="col-xs-6 col-md-5 input_pad inputbuttonservice_title" style="margin-top:5px;padding:10px;" placeholder="Product or service name">
	</div>
	<div class="content" value="buttonoption">
		<div class="buttonoption_2" style="margin-top: 15px;">
			<div class="col-xs-12 col-md-12 buttonoption_3" style="margin-top: 10px;">
				<label class="scc_label  " style="width: 5%; float: none;">XXYYXX</label>
				<input type="text" placeholder="Button Description" class="input_pad buttoninputoption" value="" style="width: 45%;" align="center" required />
				<input type="number" min=0 class="input_pad buttoninputoption_2" value="1" style="width: 15%;height:38px;" align="center" />
			</div>
		</div>
		<div class="col-lg-12 col-md-12 col-xs-12" style="padding: 10px;margin-bottom: 4px;margin-top: 15px;text-align:center;">
		</div>
		<a href="javascript:void(0)" onClick="addAnotherButton(this)" class="crossnadd" style="width:60%; margin-top: 25px;">[+] Add a Product / Service Option </a>
		<div class="warning"></div>
	</div>
</div>
<!-- End of Button Element -->
<!-- Start of Dropdown Element -->
<div id="selectoption" style="display: none">
	<hr style="margin:1px;">
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onClick="removeField2(this)" style="">x</button>
	<button class="collapsible">Dropdown Menu</button>
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onclick="colla(this)" style="width:10%;">-</button>
	<img class="sortable_subsection_element" style="cursor: pointer;  float:right;margin-right:30px;margin-top:30px;margin-left:-50px;" src="<?php echo esc_url(SCC_URL . '/assets/images/drag-symbol.svg') ?>" height="15px" />
	<i class="material-icons" onclick="javascript:handleElementCopy(this)" style="cursor: pointer;float:right;font-size: 22px;margin-right: 50px;margin-top: 26px;margin-left: -24px;">content_copy</i>
	<div class="content" value="selectoption" >
		<div class="selopt5 col-xs-12 col-md-12" style="margin-top:20px;padding:0px;">
			<div class="col-xs-3 col-md-3" style="padding:0px;height:40px;background: #f8f9ff;"><span class="scc_label" style="text-align:right;padding-right:10px;margin-top:5px;">Title</span></div>
			<div class="col-xs-9 col-md-9" style="padding:0px;"><input type="text" class="input_pad inputoption_title" style="height:40px;width:100%;" placeholder="Title"></div>
		</div>
		<hr>
		<!-- Dropdown selection MIKE -->
		<div class="selectoption_2 col-xs-12 col-md-12"  style="margin-top:20px;">
			<div class="selopt3 col-md-12 col-xs-12" style="margin-top:10px;padding:0px">
				<div class="col-xs-2 col-md-2 tooltipadmin-left" id="dropdownOpt" data-tooltip="Click to make this option default." style="padding:0px;background:#f8f9ff;height:40px;" onClick="setDefaultOption(this)">
					<label class="" style="float: none;margin-top:10px;font-size:14px;font-weight: normal;">XXYYXX</label>
				</div>
				<div class="col-md-7 col-xs-7" style="padding: 0px 5px 0px 0px;">
					<input type="text" class="input_pad inputoption" style="width:100%;height:40px;" placeholder="Product or service name" />
				</div>
				<div class="col-md-3 col-xs-3" style="padding:0px">
					<input type="number" class="input_pad inputoption_2"  style="width:100%;text-align:center;height:40px;" placeholder="Price" />
				</div>
				<span class="col-xs-0 col-md-2"></span>
				<div class="col-md-9 col-xs-9" style="padding:0px; padding-right:5px; margin-top:5px;">
					<textarea class="input_pad inputoption_desc" style="width:100%;height:75px;" placeholder="Description"></textarea>
				</div>
				<div  class="col-md-1 col-xs-1" style="padding:0px;">
					<button style="height:75px;width:100%;padding-top:5px;margin-top:5px; border: 1px solid #f8f9ff;" onclick="removeSwitchOptionDropdown(this)" >X</button>
				</div>
			</div>

		</div>
		<div class="col-lg-12 col-md-12 col-xs-12" style="padding: 10px;margin-bottom: 4px;margin-top: 15px;text-align:center;">
			<!-- This creates space for the add option button -->
		</div>
		<a href="javascript:void(0)" onClick="addOptiontoSelect(this)" class="crossnadd" style="margin-top:5px;margin-bottom:20px;">[+] Add A Product / Service Option </a>
		<div class="scc-new-accordion-container">
			<div class="styled-accordion">
				<div class="scc-title">
					<i class="material-icons">keyboard_arrow_right</i><span>Advanced Options</span>
				</div>
				<div class="scc-content">
					<div class="scc-transition hidden">
						<p>
							<label class="scc-accordion_switch_button" style="">
								<input class="scc_mandatory_dropdown" name="scc_mandatory_dropdown" type="checkbox" value="yes">
								<span class="scc-accordion_toggle_button round"></span>
							</label>
							<span><b>Mandatory</b></span>
						</p>
						<span style="text-align: left;display: block;"><b>Responsive Options</b></span>
						<div class="scc-accordion-tooltip" style="width: 95%; text-align:left;">
							<div class="text-scc-col d-flex tooltipadmin-right" data-tooltip="Please enter a number between 1 and 12. 1 being the smallest and 12 being the largest, for your title. If you have a large title, we recommend between 6 and 12.">
								<div class="col-md-9" style="padding:1px;">
									<label>Title column (desktop)</label>
								</div>
								<div class="col-md-3" style="padding:1px;">
									<input class="scc_title_column_dskp" name="scc_title_column_dskp" type="text" value="">
								</div>
							</div>
							<div class="text-scc-col d-flex">
								<div class="col-md-9" style="padding:1px;">
									<label>Title column (mobile)</label>
								</div>
								<div class="col-md-3" style="padding:1px;">
									<input class="scc_title_column_mobl" name="scc_title_column_mobl" type="text" value="">
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="styled-accordion">
				<div class="scc-title">
					<i class="material-icons">keyboard_arrow_right</i><span>Conditional Logic</span>
				</div>
				<div class="scc-content">
					<div class="scc-transition hidden">
						<p>
							<label class="scc-accordion_switch_button  tooltipadmin-right" data-tooltip="To get this feature, please become Premium. Thank you">
								<input class="scc_conditioned_dropdown" name="scc_conditioned_dropdown" type="checkbox" disabled>
								<span class="scc-accordion_toggle_button round"></span>
							</label>
							<span><b>Enable conditional element</b></span>
						</p>
						<div class="condition-container"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="warning" style=""></div>
	</div>
</div>
<!-- End of Dropdown Element -->
<!-- Start of Comment Box Element -->
<div id="comment_option" style="display: none; background-color:#fff;">
	<div>
		<div style="clear: both;"></div>
		<hr style="margin:1px;">
		<button id="close-btn" class="collapsible" href="javascript:void(0)" onClick="removeField3(this)" style="">x</button>
		<button class="collapsible">Comment Box</button>
		<button id="close-btn" class="collapsible" href="javascript:void(0)" onclick="colla(this)" style="width:10%;">-</button>
		<img class="sortable_subsection_element" style="cursor: pointer;  float:right;margin-right:30px;margin-top:30px;margin-left:-50px;" src="<?php echo esc_url(SCC_URL . '/assets/images/drag-symbol.svg') ?>" height="15px" />
		<i class="material-icons" onclick="javascript:handleElementCopy(this)" style="cursor: pointer;float:right;font-size: 22px;margin-right: 50px;margin-top: 26px;margin-left: -24px;">content_copy</i>
		<div class="content scc_comment_box" value="comment_option" style="background:white !important;">
			<div class=" selopt5 col-xs-12 col-md-12" style="margin-top:30px;background:white;padding:0px;">
				<div class="col-xs-12 col-md-12" style="margin-top:10px;">
					<div class="col-xs-3 col-md-3" style="padding:0px; background: #f8f9ff;height: 40px;">
						<span class="scc_label" style="text-align:right;padding-right:10px;margin-top:5px;" placeholder="Height">Height</span>
					</div>
					<div class="col-xs-9 col-md-9" style="text-align:left;padding:0px;">
						<input type="number" class="input_pad inputoption_2"  style="text-align:center;width:80px;height:40px" placeholder="rows" value="4"/>
					</div>
				</div>
				<div class="col-xs-12 col-md-12" style="margin-top:10px;">
					<div class="col-xs-3 col-md-3" style="padding:0px;background: #f8f9ff;height: 40px;">
						<span class="scc_label" style="text-align:right;padding-right:10px;margin-top:5px;">Title</span>
					</div>
					<div class="col-xs-9 col-md-9" style="padding:0px;">
						<input type="text" class="input_pad inputoption_title" style="height:40px;width:100%;max-width:100% " placeholder="">
					</div>

				</div>
				<div class="col-xs-12 col-md-12" style="margin-top:10px;margin-bottom: 10px">
					<div class="col-xs-3 col-md-3" style="padding:0px;background: #f8f9ff;height: 40px;">
						<span class="scc_label" style="margin-top:5px;text-align:right;padding-right:10px;">Placeholder</span>
					</div>
					<div class="col-xs-9 col-md-9" style="padding:0px;">
						<textarea class="input_pad inputoption_desc" style="height:40px;width:100%;max-width: 100%;" rows="1" placeholder=""></textarea>
					</div>
				</div>
				<div class="scc-new-accordion-container">
					<div class="styled-accordion">
						<div class="scc-title">
							<i class="material-icons">keyboard_arrow_right</i><span>Advanced Options</span>
						</div>
						<div class="scc-content">
							<div class="scc-transition hidden">
								<p>
									<label class="scc-accordion_switch_button" style="">
										<input class="scc_mandatory_comment" name="scc_mandatory_comment" type="checkbox" value="no">
										<span class="scc-accordion_toggle_button round"></span>
									</label>
									<span><b>Mandatory</b></span>
								</p>
								<span style="text-align: left;display: block"><b>Responsive Options</b></span>
								<div class="scc-accordion-tooltip" style="width: 95%; text-align:left;">
									<div class="text-scc-col d-flex tooltipadmin-right" data-tooltip="Please enter a number between 1 and 12. 1 being the smallest and 12 being the largest, for your title. If you have a large title, we recommend between 6 and 12.">
										<div class="col-md-9" style="padding:1px;">
											<label>Title column (desktop)</label>
										</div>
										<div class="col-md-3" style="padding:1px;">
											<input class="scc_title_column_dskp_cmntbx" name="scc_title_column_dskp_cmntbx" type="text" value="">
										</div>
									</div>
									<div class="text-scc-col d-flex">
										<div class="col-md-9" style="padding:1px;">
											<label>Title column (mobile)</label>
										</div>
										<div class="col-md-3" style="padding:1px;">
											<input class="scc_title_column_mobl_cmntbx" name="scc_title_column_mobl_cmntbx" type="text" value="">
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>
					<div class="styled-accordion">
						<div class="scc-title">
							<i class="material-icons">keyboard_arrow_right</i><span>Conditional Logic</span>
						</div>
						<div class="scc-content">
							<div class="scc-transition hidden">
								<p>
									<label class="scc-accordion_switch_button  tooltipadmin-right" data-tooltip="To get this feature, please become Premium. Thank you">
										<input class="scc_conditioned_dropdown" name="scc_conditioned_dropdown" type="checkbox" disabled>
										<span class="scc-accordion_toggle_button round"></span>
									</label>
									<span><b>Enable conditional element</b></span>
								</p>
								<div class="condition-container"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="warning" style=""></div>
		<div style="clear: both;"></div>
	</div>
</div>
<!-- End of Comment Box Element -->
<!-- Start of Number Input Box Element -->
<div id="number_option" style="display: none;background-color:#fff; ">
	<div style="clear: both;"></div>
	<hr style="margin:1px;">
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onClick="removeField3(this)" style="">x</button>
	<button class="collapsible" style="padding:0px;">Number Input Box</button>
	<button id="close-btn" class="collapsible" href="javascript:void(0)" onclick="colla(this)" style="width:10%;">-</button>
	<img class="sortable_subsection_element" style="cursor: pointer;  float:right;margin-right:30px;margin-top:30px;margin-left:-50px;" src="<?php echo esc_url(SCC_URL . '/assets/images/drag-symbol.svg') ?>" height="15px" />
	<i class="material-icons" onclick="javascript:handleElementCopy(this)" style="cursor: pointer;float:right;font-size: 22px;margin-right: 50px;margin-top: 26px;margin-left: -24px;">content_copy</i>
	<div class="content scc_number_box" value="number_option" style="background:white !important;">
		<div class="selopt5 col-xs-12 col-md-12" style="margin-top:10px;background:white;">
			<div class="col-xs-12 col-md-12" style="padding:0px;margin-bottom:10px;">
				<div class="col-xs-3 col-md-3" style="padding:0px;background:#f8f9ff;height:40px;">
					<span class="scc_label" style="text-align:left;padding-right:10px;margin-top:5px;">Input Box Style</span>
				</div>
				<div class="col-xs-9 col-md-9" style="padding:0px;">
					<select type="select-one" name="quantity-input--style-selection" style="width:100%;max-width:100%;float:left;height:40px;">
						<option value="default">Default</option>
						<option value="compact">Compact</option>
					</select>
				</div>
			</div>
			<div class="col-xs-3 col-md-3" style="padding:0px;background:#f8f9ff;height:40px;">
				<span class="scc_label" style="text-align:right;padding-right:10px;margin-top:5px;">Title</span>
			</div>
			<div class="col-xs-9 col-md-9" style="padding:0px;">
				<input type="text" class="input_pad inputoption_title" style="width:100%;max-width:100%;float:left;height:40px;" placeholder="Title">
			</div>

		</div>
		<!-- selection MIKE -->
		<div class="selectoption_2 col-xs-12 col-md-12" style="background:white; padding-bottom: 20px;width:100%;">
			<div class="selopt3" style="margin-top: 10px;">
				<div class="col-xs-12 col-md-12" style="padding:0px;">
					<div class="col-xs-3 col-md-3" style="padding:0px;background:#f8f9ff;height:40px;">
						<span class="scc_label" style="text-align:right;margin-top:5px;padding-right:10px;" placeholder="Unit Value">Price</span>
					</div>
					<div class="col-xs-9 col-md-9" style="padding:0px;">
						<input type="number" class="input_pad inputoption_2"  style="float:left;margin-right:10px;width:80px;height:40px" placeholder="price" value="1" min="0"/>
					</div>
				</div>
			</div>
		</div>
		<div class="scc-new-accordion-container">
			<div class="styled-accordion">
				<div class="scc-title">
					<i class="material-icons">keyboard_arrow_right</i><span>Advanced Options</span>
				</div>
				<div class="scc-content">
					<div class="scc-transition hidden">
						<p>
							<label class="scc-accordion_switch_button" style="">
								<input class="scc_mandatory_number" name="scc_mandatory_number" type="checkbox" value="no">
								<span class="scc-accordion_toggle_button round"></span>
							</label>
							<span><b>Mandatory</b></span>
						</p>
						<span style="text-align: left;display: block;"><b>Responsive Options</b></span>
						<div class="scc-accordion-tooltip" style="width: 95%; text-align:left;">
							<div class="text-scc-col d-flex tooltipadmin-right" data-tooltip="Please enter a number between 1 and 12. 1 being the smallest and 12 being the largest, for your title. If you have a large title, we recommend between 6 and 12.">
								<div class="col-md-9" style="padding:1px;">
									<label>Title column (desktop)</label>
								</div>
								<div class="col-md-3" style="padding:1px;">
									<input class="scc_title_column_dskp_numbx" name="scc_title_column_dskp_numbx" type="text" value="">
								</div>
							</div>
							<div class="text-scc-col d-flex">
								<div class="col-md-9" style="padding:1px;">
									<label>Title column (mobile)</label>
								</div>
								<div class="col-md-3" style="padding:1px;">
									<input class="scc_title_column_mobl_numbx" name="scc_title_column_mobl_numbx" type="text" value="">
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="styled-accordion">
				<div class="scc-title">
					<i class="material-icons">keyboard_arrow_right</i><span>Conditional Logic</span>
				</div>
				<div class="scc-content">
					<div class="scc-transition hidden">
						<p>
							<label class="scc-accordion_switch_button  tooltipadmin-right" data-tooltip="To get this feature, please become Premium. Thank you">
								<input class="scc_conditioned_dropdown" name="scc_conditioned_dropdown" type="checkbox" disabled>
								<span class="scc-accordion_toggle_button round"></span>
							</label>
							<span><b>Enable conditional element</b></span>
						</p>
						<div class="condition-container"></div>
					</div>
				</div>
			</div>
		</div>
		<!--	<a href="javascript:void(0)" onClick="addOptiontoSelect(this)" class="crossnadd" style="margin-top:10px;margin-bottom:20px;">+ Add Option </a> -->
	</div>
	<div class="warning" style=""></div>
	<div style="clear: both;"></div>
</div>
<!-- End of Number Box Element -->
<!-- BELOW CODE DEPRRCTATED? -->
<li id='form-line' style="display: none">
	<hr style="margin:1px;">
	<div class="BodyOption">
		<label class="scc_label" style="padding-left: 20px;width:30%;text-align:left;">Input Type</label>
		<select onchange="getFieldOptionx(this)" class="getfieldoptionx " style="width:50%;min-width:50%;margin-top:20px;" >
			<option value=""></option>
			<option value="dropdowninput">Dropdown Menu</option>
			<option value="switchinput">Checkbox</option>
			<!--<option value="simplebuttons">Simple Buttons</option>-->
			<!-- <option value="addSlider(this)">Combind Slide</option> -->
		</select>
		<div style="clear: both;"></div>
	</div>
</li>
<!-- ABOVE CODE DEPRECTATED? -->
<div class="scc_wrapper"><div style="clear: both;" id="previewInputsAdd" class="scc_wrapper"></div></div>
<div id="scc-demover" data-demo="<?php echo get_option('scc_licensed');?>"></div>
</div>
<div class="splitter"></div>
<!-- Start Preview -->
<?php if(isset($_REQUEST["id"]) && $_REQUEST["id"]){ ?>
	<div class="pane-right">
		<div style="background:#f8f9ff;border-radius:20px;padding:21px;display:block;clear:both;border: 0px dotted #E2E2E2;" id="myPREVIEW" class="scc_wrapper scc_preview_backend">

			<?php $license_enable = get_option('scc_licensed');
			if($license_enable == 1){
				?>
				<label class="scc_label" style="text-align: middle;margin-top: -10px;margin-left:-5px;"><a  data-tooltip="Changes will be saved." style="pointer-events: none;padding:7px;" class="scc_button save_button  tooltipadmin-right" href="javascript:void(0)" onClick="saveFields(true, <?php echo count($results) ?>,<?php echo isset($allinputstoadd)  ? 'true' : 'false' ?> )">Refresh</a></label>
				<?php
			}
			if($license_enable == 0 || !isset($license_enable)){
				?>
				<label class="scc_label" style="text-align: middle;margin-top: -10px;margin-left:-5px;"><a data-tooltip="Changes will be saved"  style="pointer-events: none;padding:7px;" class="scc_button save_button tooltipadmin-right" href="javascript:void(0)" onClick="saveFields(false, <?php echo count($results) ?>,<?php echo isset($allinputstoadd) && is_array($allinputstoadd) && sizeof($allinputstoadd)  > 0 ? 'true' : 'false' ?> )">Refresh </a></label>
				<?php
			}
			?>
			<?php echo do_shortcode('[scc_calculator type="text" idvalue="'.$_REQUEST["id"].'"]');?>
		</div>
	</div>
<?php } ?>
</div>
<script>
	document.addEventListener('DOMContentLoaded', (event) => {
		let window_w = jQuery(window).width()
		jQuery("#calcPreview").sccCalcPreviewContainer(
		{
			autoClose:false,
			width:"660",
			pos_y:"50",
			pos_x: window_w - (660 +5),
			height: window.innerHeight,
			bg_color: '#f9f9fe',
			title:"Calculator Preview",
			body_margin:"0",
			body_overflow_x:"hidden",
			body_overflow_y:"scroll",
			movable:false,
			resizable:true,
			touchOutsideForClose:false
		});
		jQuery("#calcPreview").sccCalcPreviewContainer('open');

			// setTimeout(() => {
			// 	jQuery("#calcPreview").sccCalcPreviewContainer(
	        //     {
	        //         autoClose:false,
	        //         width:"768",
			// 		pos_y:"50",
			// 		pos_x: (window_w - 768) / 1.058,
	        //         height: window.innerHeight * 0.8,
	        //         bg_color:'white',
	        //         title:"Calculator Preview",
	        //         body_margin:"10",
	        //         body_overflow_x:"hidden",
	        //         body_overflow_y:"scroll",
	        //         movable:false,
	        //         resizable:true,
	        //         touchOutsideForClose:false
			// 	});
			// 	jQuery("#myDialog").sccCalcPreviewContainer('open');
			// }, 0);
		})
	function toggleEditTitle(element) {

		jQuery(element).parent().parent().prev().css('display', 'block')
		jQuery(element).parent().parent().prev().css('height', 70)
		jQuery(element).parent().parent().prev().find('.sectiontitle').each(function(index, ob){
			jQuery(ob).css('display', 'inline-block')
		})
		jQuery(element).parent().parent().prev().find('.mandatory').each(function(index, ob){
			jQuery(ob).css('display', 'inline-block')
		})
		console.log(jQuery(element).parent().parent())
		jQuery(element).parent().parent().css('display', 'none')
	}
	function toggleEditDescription(element) {

		jQuery(element).parent().parent().prev().css('display', 'block')
		jQuery(element).parent().parent().prev().find('.sectionDescription').each(function(index, ob){
			jQuery(ob).css('display', 'inline-block')
		})

		jQuery(element).parent().parent().css('display', 'none')
	}
	function accordionIconClick(settingsIcon){
			//jQuery(settingsIcon).find('.accordion-container').each(function(index, ob){
				jQuery('.scc-accordion-container').toggleClass('scc-accordion-tooltip-hidden')
			//})
		}    jQuery(document).ready(function(){
			var previewModalOpenned = false
			jQuery('#scc-wp-footer').css('position', 'absolute')

			jQuery('.scc_preview_calculator').click(function(){
				//	if(!previewModalOpenned){


				//	}

				/*
					var x = document.getElementById("myPREVIEW");
					if (x.style.display === "none") {
					x.style.display = "block";
					} else {
					x.style.display = "none";
					}
					*/
				});
		});
	</script>
	<!-- End Preview -->
</div>
<br>
<!-- ******************************************************* -->
<!-- QUOTE FORM START -->
<div class="editing-action-cards action-quoteform" style="margin-top: 50px;">
	<div class="card-content">
		<h3>Email Quote | Form Builder <a href="<?php echo admin_url('admin.php?page=df-scc-view-quotes') ?>" style="vertical-align: middle; color: #000"><i class="material-icons with-tooltip">info</i></a></h3>
		<p>Customize your email quote form.</p>
	</div>
	<div class="card-action-btns has-tooltip tooltipadmin-right" data-tooltip='Please become Premium to use Email Quotes with custom fields'>
		<button class="btn btn-cards disabled" data-btn-fieldtype="custom" data-field-key="name">
		<span>Your Name</span>
		<i class="scc-icon-formbuilder material-icons" data-form-builder-action-type="edit" onclick="console.log">edit</i>
		</button><button class="btn btn-cards disabled" data-btn-fieldtype="custom" data-field-key="email">
		<span>Your Email</span>
		<i class="scc-icon-formbuilder material-icons" data-form-builder-action-type="edit" onclick="console.log">edit</i>
		</button><button class="btn btn-cards disabled" data-btn-fieldtype="custom" data-field-key="phone">
		<span>Your Phone</span>
		<i class="scc-icon-formbuilder material-icons" data-form-builder-action-type="edit" onclick="console.log">edit</i>
		</button><button class="btn btn-cards btn-plus disabled" data-btn-fieldtype="more-fields" onclick="doFormFieldsSetup(this, event)">
			<span class="material-icons">done</span>+
		</button>
	</div>
	<div id="formFieldSetupModal" class="fade in" role="dialog"></div>
</div>
<!-- END QUOTE FORM -->
<!-- PAYUPAL BUTTON -->
<div style="max-width:1000px;" class="scc-col-xs-12 clearfix" >
	<div class="editing-action-cards action-payment">
		<div class="card-content">
			<h3>Payment Options</h3>
			<p>This is optional and only for users who want to use this plugin to collect payments. Choose one or more.</p>
		</div>
		<div class="card-action-btns has-checkmark tooltipadmin-right" data-tooltip='Please become Premium to use Payment Options'>
			<button class="btn btn-cards disabled" data-btn-type="paypal"><span class="material-icons">done</span>Paypal</button>
			<button class="btn btn-cards disabled" data-btn-type="stripe"><span class="material-icons">done</span><span>Stripe</span></button>
			<button class="btn btn-cards disabled" data-btn-type="woocommerce"><span class="material-icons">done</span>Woocommerce</button>
		</div>
		<a href="https://designful.freshdesk.com/en/support/solutions/articles/48001076926-woocommerce-integration" target="_blank">WooCommerce Tutorial</a>
	</div>
	<!-- Start of new save section -->
	<div class="editing-action-cards action-save">
		<div class="card-content">
			<h3>Save</h3>
			<p>Save your current form, backup or restore an existing calculator.</p>
		</div>
		<div class="card-action-btns">
			<button class="btn btn-cards-primary" onclick="saveFields(true, <?php echo count($results) ?>,<?php echo isset($allinputstoadd)  ? 'true' : 'false' ?> )">Save</button>
			<span class="tooltipadmin-right" data-tooltip="Please become premium to use Backup/Restore">
				<button class="btn btn-cards disabled">Backup</button>
				<button class="btn btn-cards disabled">Restore</button>
			</span>
		</div>
		<!-- helper elements -->
		<a id="downloadAnchorElem"></a>
	</div><!-- new save section end -->
</div>
<!-- END PAYUPAL BUTTON -->

<!-- START OF USER MANUAL (HELP) WIDGET-->
<script>
	window.fwSettings={
		'widget_id':48000001220
	};
	!function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()
</script>
<script type='text/javascript' src='https://widget.freshworks.com/widgets/48000001220.js' async defer></script>
<!-- END OF USER MANUAL (HELP) WIDGET-->
<div id="preview_modal_section"></div>
<div class="modal df-scc-modal fade in" id="user-scc-sv" style="padding-right: 0px;" role="dialog">
	<div class="df-scc-euiOverlayMask df-scc-euiOverlayMask--aboveHeader">
		<div class="df-scc-euiModal df-scc-euiModal--maxWidth-default df-scc-euiModal--confirmation">
			<button class="df-scc-euiButtonIcon df-scc-euiButtonIcon--text df-scc-euiModal__closeIcon" type="button" data-dismiss="modal" aria-label="Closes this modal window"><svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="df-scc-euiIcon df-scc-euiIcon--medium df-scc-euiButtonIcon__icon" focusable="false" role="img" aria-hidden="true"><path d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"></path></svg></button>
			<div class="df-scc-euiModal__flex">
				<div class="df-scc-euiModalHeader">
					<div class="df-scc-euiModalHeader__title trn">Satisfaction Survey</div>
				</div>
				<div class="df-scc-euiModalBody">
					<div class="df-scc-euiModalBody__overflow">
						<div class="df-scc-euiText df-scc-euiText--medium">
							<p>Please take a quick moment to tell us how we are doing. The development team strive to make the best plugin for you and your visitors.</p>
						</div>
					</div>
				</div>
				<div class="df-scc-euiModalFooter">
					<a class="df-scc-euiButton df-scc-euiButton--primary" href="https://stylishcostcalculator.com/how-can-we-be-better?utm-source=scc-free" onclick="handleFeedbackButtons(this, event)" data-btn-type="yes" target="_blank">
						<span class="df-scc-euiButtonContent df-scc-euiButton__content">
							<span class="df-scc-euiButton__text">It Could Be Better</span>
						</span>
					</a>
					<a class="df-scc-euiButton df-scc-euiButton--primary df-scc-euiButton--fill" href="https://stylishcostcalculator.com/please-leave-a-review?utm-source=scc-free" onclick="handleFeedbackButtons(this, event)" data-btn-type="no" target="_blank">
						<span class="df-scc-euiButtonContent df-scc-euiButton__content">
							<span class="df-scc-euiButton__text">I’m Loving It!</span>
						</span>
					</a>
					<button class="df-scc-euiButton df-scc-euiButton--primary" onclick="handleFeedbackButtons(this, event)" data-btn-type="skip">
						<span class="df-scc-euiButtonContent df-scc-euiButton__content">
							<span class="df-scc-euiButton__text">I’m Still Getting Used To It</span>
						</span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	jQuery(document).ready(function($) {
		<?php if ((get_option('scc-save-count') == scc_feedback_invokation('form')) && scc_feedback_invokation('form') != 0) echo "jQuery('#user-scc-sv').modal('show').show();" ?>
	});
	function handleFeedbackButtons(btn, event) {
		event.preventDefault();
		jQuery.post(ajaxurl, {
			'action': 'scc_feedback_manage',
			'btn-type': jQuery(btn).data('btnType')
		}, function(response) {
			jQuery('#user-scc-sv').modal('hide');
			var link = jQuery(btn).attr('href');
			if (link) {
				window.open(link, '_blank');
			}
		});
	}
	function addElementButton(element){
		// console.log(jQuery(element).parent().parent().next())
		jQuery(element).parent().parent().next().css('display', 'block')
		jQuery(element).parent().parent().hide(300)
	}
	UTF8 = {
		encode: function(s){
			for(var c, i = -1, l = (s = s.split("")).length, o = String.fromCharCode; ++i < l;
				s[i] = (c = s[i].charCodeAt(0)) >= 127 ? o(0xc0 | (c >>> 6)) + o(0x80 | (c & 0x3f)) : s[i]
				);
				return s.join("");
		},
		decode: function(s){
			for(var a, b, i = -1, l = (s = s.split("")).length, o = String.fromCharCode, c = "charCodeAt"; ++i < l;
				((a = s[i][c](0)) & 0x80) &&
				(s[i] = (a & 0xfc) == 0xc0 && ((b = s[i + 1][c](0)) & 0xc0) == 0x80 ?
					o(((a & 0x03) << 6) + (b & 0x3f)) : o(128), s[++i] = "")
				);
				return s.join("");
		}
	}
	function downloadBackup(){
		$fragment_refresh = {
			url: rt_vars.rt_urlajax,
			type: 'POST', //jQuery('#previewInputsAdd').html().trim()
			data: {
				action: 'sccDownloadBackup',
				id: <?php echo (isset($_GET['id']) && is_numeric($_GET['id']) && $_GET['id'] > 0) ? $_GET['id'] : 0 ?>
			},
			success: function( data ) {

				var dataStringified = JSON.stringify(data)
				if(dataStringified[dataStringified.length -2] === "0"){
					dataStringified = dataStringified.substring(0, dataStringified.length -2)
					dataStringified += "\'"
				}
				dataStringified = dataStringified.replace(/\\\\/g, "");
				dataStringified = dataStringified.replace(/\\\\/g, "");
				dataStringified = dataStringified.replace(/\\\\/g, "");
				dataStringified = dataStringified.replace(/\"/g, "\'");
				dataStringified = dataStringified.replace(/\\\'/g, "\"");

				dataStringified = dataStringified.replace(/\"{/g, "{");
				dataStringified = dataStringified.replace(/\"\[/g, "[");

				dataStringified = dataStringified.replace(/}\"/g, "}");
				dataStringified = dataStringified.replace(/\]\"/g, "]");

				dataStringified[dataStringified.length - 1] = "\'"
				dataStringified = dataStringified.substring(1,dataStringified.length - 1 )
				dataStringified = dataStringified.replace(/u0/g, "\\u0");
				dataStringified = dataStringified.replace(/\\t/g, "");
				dataStringified = dataStringified.replace(/%/g, "|percent|");
				console.log('BEFORE',dataStringified)
				var jsonData = JSON.parse(dataStringified)

				var iterateData = function(obj) {
					if(typeof obj === 'object'){
						for(var i in obj) {
							if(obj.hasOwnProperty(i)){
								if(typeof obj[i] === 'object'){
									iterateData(obj[i])
									return;
								}else{
									console.log('obj[i]', obj[i])
									obj[i] = decodeURIComponent(obj[i]);

								}
							}
						}
					}
				}
				iterateData(jsonData)
				console.log('AFTER',JSON.stringify(jsonData))

				var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonData))	;


				var sccName = 'No name.json'
				try{
					sccName = jsonData.scc_form.formname + '.json'
				}catch(err){

				}
				/*
					if(dataStringified.indexOf('formname') != 1){
					sccName = dataStringified.split('formname')[1]
					if(sccName && typeof sccName === 'string'){
					sccName = sccName.split(',')[0]
					sccName = sccName.replace(/_/g, "");
					}

					}
					*/
					var a = document.getElementById('downloadAnchorElem');

					a.setAttribute("href",     dataStr     );

					var json = JSON.stringify(jsonData),
					blob = new Blob([json], {type: "octet/stream"}),
					url = window.URL.createObjectURL(blob);
					a.href = url;
					a.download = sccName;
					a.click();
				//			window.URL.revokeObjectURL(url);
				//			dlAnchorElem.setAttribute("download", sccName + ".json");
				//				dlAnchorElem.click();

			}
		};

		jQuery.ajax( $fragment_refresh );
	}
	function previewModal(){
		previewModalOpenned = true
		var code = ""

		code += '<div id="preview_modal" class="scc-modal-2020 fade"  role="dialog">'
		code += '	<div class="scc-modal-dialog-2020" style="width: 100%;  margin: 0;padding: 0;">'
		code += '		<div class="scc-modal-content-2020" style="height:550px; margin-top: 330px;margin-left: 70px; border-radius: 0;width:70%">'
		code += '		<div class="scc-modal-header-2020">'
		code += '			<button type="button" class="close" data-dismiss="modal">&times;</button>'
		code += '			<h3 class="scc-modal-title-2020">PREVIEW CALCULATOR (Draggable)</h3>'
		code += '		</div>'
		code += '		<div class="scc-modal-body-2020" style="height: 90%; overflow: hidden;overflow-y: scroll">'
		code += jQuery('#myPREVIEW').html()
		code += '		</div>'

		code += '		</div>'
		code += '	</div>'
		code += '</div>'

		jQuery('#preview_modal_section').html(code)
		jQuery('#preview_modal').modal('show')
		//		$('.scc-modal-content-2020').resizable({
		//alsoResize: ".scc-modal-dialog-2020",
		//			minHeight: 300,
		//			minWidth: 300
		//		});
		//	$('.scc-modal-dialog-2020').draggable();

	}
	function closePreviewModal(){
		jQuery('#preview_modal').modal('hide')
		jQuery('#preview_modal').modal('hide')
		setTimeout(() => {
			jQuery('#preview_modal').remove()
			jQuery('#preview_modal_section').html('')
			jQuery('.modal-backdrop').each((index, element) => {
				jQuery('#preview_modal').modal('hide')
				console.log('removing...', element)
				element.remove()
				jQuery(element).remove()
				setTimeout(() => {
					jQuery('#preview_modal').modal('hide')
					jQuery('#preview_modal').modal('hide')
				}, 1000);
			});

		}, 1000);
		previewModalOpenned = false
	}
	var scc_currency = "<?php echo htmlspecialchars(stripslashes(sanitize_text_field(get_option('scc_currency')))) ?>";
	function removeSwitchOption(element){
		if(element && element.parentNode && element.parentNode.parentNode && element.parentNode.parentNode.parentNode){
			var container = jQuery(element).parent().parent().parent()
			var elementContainer = jQuery(container).parent()
			jQuery(container).remove()

			if(jQuery(elementContainer).children().length == 0) {
				jQuery(elementContainer).remove()
			}

		}else{
			element.parentNode.remove();
		}

	}
	function removeSwitchOptionDropdown(element){
		jQuery(element).parent().parent().remove();
	}
	function openModalPaypalForm(){
		if(jQuery('#paypal_checkbox').prop('checked')){
			var code = ""
			code += '    <div id="modalPaypalForm" class="scc-modal-2020 fade" role="dialog" data-backdrop="static" data-keyboard="false" >'
			code += '        <div class="scc-modal-dialog-2020" style="width:560px;top:250px;">'
			code += '          <div class="scc-modal-content-2020">'
			code += '            <div class="scc-modal-header-2020">'
			code += '             <button type="button" class="close" data-dismiss="modal">&times;</button>'
			code += '             <h4 class="scc-modal-title-2020">Paypal Form</h4>'
			code += '            </div>'
			code += '            <div class="scc-modal-body-2020" style="margin-top:<?php echo isset($parameters) && is_array($parameters) && count($parameters)  > 0 ? '280px' : '0px' ?>;  ">'
			code += '              <p></p>'
			code += '               <div class="form-group">'
			code += '                   <label for="paypal_email_form">Email address(Business Paypal email mandatory!):</label>'
			code += '                   <input type="email" class="form-control" id="paypal_email_form" required>'
			code += '               </div>'
			code += '               <div class="form-group">'
			code += '                    <label for="paypal_shopping_cart_name_form">Shopping cart name:</label>'
			code += '                    <input type="text" class="form-control" id="paypal_shopping_cart_name_form">'
			code += '               </div>'
			code += '               <div class="form-group">'
			code += '                    <label for="paypal_currency_form">Currency:</label>'
			code += '                    <select class="form-control" id="paypal_currency_form" required>'
			code += '                        <option value="0">Select Currency</option>'
			code += '                        <option value="AUD">Australian Dollar</option>'
			code += '                        <option value="BOB">Bolivian boliviano</option>'
			code += '                        <option value="BRL">Brazilian Real </option>'
			code += '                        <option value="CAD">Canadian Dollar</option>'
			code += '                        <option value="CZK">Czech Koruna</option>'
			code += '                        <option value="DKK">Danish Krone</option>'
			code += '                        <option value="EUR">Euro</option>'
			code += '                        <option value="HKD">Hong Kong Dollar</option>'
			code += '                        <option value="ILS">Israeli New Sheqel</option>'
			code += '                        <option value="INR">Indian Rupee</option>'
			code += '                        <option value="JPY">Japanese Yen</option>'
			code += '                        <option value="MYR">Malaysian Ringgit</option>'
			code += '                        <option value="MXN">Mexican Peso</option>'
			code += '                        <option value="ANG">Netherlands Antillean Guilder</option>'
			code += '                        <option value="NOK">Norwegian Krone</option>'
			code += '                        <option value="NZD">New Zealand Dollar</option>'
			code += '                        <option value="PHP">Philippine Peso</option>'
			code += '                        <option value="PLN">Polish Zloty</option>'
			code += '                        <option value="GBP">British Pound Sterling</option>'
			code += '                        <option value="RON">Romanian leu</option>'
			code += '                        <option value="RUB">Russian Rubles</option>'
			code += '                        <option value="SGD">Singapore Dollar</option>'
			code += '                        <option value="SEK">Swedish Krona</option>'
			code += '                        <option value="CHF">Swiss Franc</option>'
			code += '                        <option value="KRW">South Korean won</option>'
			code += '                        <option value="TWD">Taiwan New Dollar</option>'
			code += '                        <option value="THB">Thai Baht</option>'
			code += '                        <option value="USD" >U.S. Dollar</option>'
			code += '                     </select>'
			code += '                </div>'
			code += '                <div id="paypal_modal_form_no_valid_fields_message" style="color:red"></div>'
			code += '            </div>'
			code += '            <div class="modal-footer">'
			code += '              <button type="button" class="btn btn-default" data-dismiss="modal" onclick="cancelModalButton()">Cancel</button>'
			code += '              <button type="button" class="btn btn-primary" onclick="paypalFormValidation()">Accept</button>'
			code += '            </div>'
			code += '           </div>'
			code += '        </div>'
			code += '      </div>'
			jQuery('#paypal_modal').html(code)
			jQuery('#modalPaypalForm').modal('show')
			jQuery('#paypal_currency').children('option').each( function() {
				if(jQuery(this).val() === scc_currency){
					jQuery(this).prop('selected', true)
				}
			});
		}else{
			jQuery('#paypal_fields').html('')
			jQuery('#paypal_form_result').html('')
		}

	}
	function cancelModalButton(){
		jQuery('#paypal_checkbox').prop( "checked", false )
		jQuery('#modalPaypalForm').modal('hide')
	}
	function paypalFormValidation(){

		var paypalEmail = jQuery('#paypal_email_form').val()
		var paypalShoppingCartName = jQuery('#paypal_shopping_cart_name_form').val()
		var paypalCurrency = ""
		jQuery.each(jQuery("#paypal_currency_form option:selected"), function(){
			paypalCurrency = jQuery(this).val()
		})

		var noValidMessage = false
		if(paypalEmail == null || typeof paypalEmail == "undefined" || paypalEmail.length < 5
			|| paypalEmail.indexOf("@") == -1 || paypalEmail.indexOf(".") == -1 ){
			noValidMessage = "Invalid Email!"
	}
	if(paypalShoppingCartName == null || typeof paypalShoppingCartName == "undefined"
		|| paypalShoppingCartName.length < 2
		){
		noValidMessage === false ? noValidMessage = " | Invalid Shopping card Name!" : noValidMessage += " | Invalid Shopping card Name!"
}
if(paypalCurrency == null || typeof paypalCurrency == "undefined" || paypalCurrency == "0"){
	noValidMessage === false ? noValidMessage = " | Select a Currency!" : noValidMessage += " | Select a Currency!"
}
if(!noValidMessage){
	var paypal_form_result = ""
	paypal_form_result += "<ul>"
	paypal_form_result += " <li>"
	paypal_form_result += "Email: " + paypalEmail
	paypal_form_result += " </li>"
	paypal_form_result += " <li>"
	paypal_form_result += "Shopping Cart Name: " + paypalShoppingCartName
	paypal_form_result += " </li>"
	paypal_form_result += " <li>"
	paypal_form_result += "Currency: " + paypalCurrency
	paypal_form_result += " </li>"
	paypal_form_result += " </ul>"
	jQuery('#paypal_form_result').html(paypal_form_result)
	var paypal_fields = ""
	paypal_fields += "<input type='hidden' id='paypal_email' value='" + paypalEmail + "'/>"
	paypal_fields += "<input type='hidden' id='paypal_shopping_cart_name' value='" + paypalShoppingCartName + "'/>"
	paypal_fields += "<input type='hidden' id='paypal_currency' value='" + paypalCurrency + "'/>"
	jQuery('#paypal_fields').html(paypal_fields)
	jQuery('#modalPaypalForm').modal('hide')
	jQuery('#paypal_show_fields').css('display','block')
	jQuery('#paypal_checkbox').prop('checked', true)
}else{
	jQuery('#paypal_modal_form_no_valid_fields_message').html(noValidMessage.replace('false', ''))
}
}

function checkPluginCacheHasBeenLoaded(){
	var ss = document.styleSheets

	var cacheCssLinkExists = false
	var scriptsCacheExists = false

	for(var i=0; i< ss.length; i++){
		if(ss[i].href && ss[i].href.indexOf("cache") != -1){
			cacheCssLinkExists = true
			break
		}
	}

	var scripts = document.querySelectorAll('script')

	for(var i=0; i< scripts.length; i++){
		if(scripts[i].src && scripts[i].src.indexOf("cache") != -1){
			scriptsCacheExists = true
			break
		}
	}

	if(cacheCssLinkExists || scriptsCacheExists){
		jQuery('#cache_message').css('display', 'block')
	}
}
function removeCacheMessage(object){
	if(object && jQuery(object) && jQuery(object).parent()){
		jQuery(object).parent().remove()
	}
}

function onCloseDialog() {
	jQuery('#scc-modal-content-2020-welcome').dialog('close')
}
/*
			function showWelcomeScreen() {
				jQuery.getScript('<?php echo plugin_dir_url(__DIR__) . 'assets/js/jquery-ui.js' ?>', function(data) {


			var code = ""
			code += '<div id="scc-modal-content-2020-welcome" style="display:none;border-radius: 25px;background: #DDD; position: absolute; left: 150px; top: -300px"><div style="text-align:right; right:-10px;top: -10px; background-color:#DDD;cursor:pointer; font-size:30px;color:blue" onClick="onCloseDialog()">X</div>'
			code += '<div>'
			code += '<div style="text-align	:center; font-size:40px; color: blue;margin-top:20px">'
			code +=  'Welcome'
			code += '</div>'
			code += '<div style="text-align	:center; font-size:40px; color: blue;margin-bottom:10px">'
			code +=  '<b>to Stylish Cost Calculator!</b>'
			code += '</div>'
			code += '<div style="text-align	:center; font-size:30px; color: black;margin-bottom:10px">'
			code +=  '<b>An easy-to-use cost calculator for you and your customers</b>'
			code += '</div>'
			code += '<ul class="ul-welcome">'
			code += '  <li class=" il-welcome bg-purple">'
			code += '    <button class="welcome-button">COMPARING FREE VS PRO</button>'
			code += '  </li>'
			code += '  <li class="il-welcome bg-blue">'
			code += '    <button class="welcome-button">FREE</button>'
			code += '  </li>'
			code += '  <li class=" il-welcome bg-blue active">'
			code += '    <button class="welcome-button">PRO</button>'
			code += '  </li>'
			code += '</ul>  '

			code += '<table class="welcome-table" style="background:white;margin-top:40px;margin:50px;max-width:800px">'
			code += '  <thead>'
			code += '    <tr class="welcome-tr">'
			code += '      <th class="hide"></th>'
			code += '      <th class="bg-purple">COMPARING FREE VS PRO</th>'
			code += '      <th class="bg-blue">FREE</th>'
			code += '      <th class="bg-blue default">PRO</th>'
			code += '    </tr>'
			code += '  </thead>'
			code += '  <tbody>'
			code += '    <tr style="background:#DDD">'
			code += '      <td class="welcome-td">PRICE BREAKDOWN FEATURE (VIEW ONLY)</td>'
			code += '      <td class="welcome-td"><span class="tick">&#10004;</span></td>'
			code += '      <td class="welcome-td"><span class="tick">&#10004;</span></td>'
			code += '    </tr>'
			code += '    <tr style="background:#DDD">'
			code += '      <td class="welcome-td">UNLIMITED ELEMENTS</td>'
			code += '      <td class="welcome-td"><span class="tick">&#10004;</span></td>'
			code += '      <td class="welcome-td"><span class="tick">&#10004;</span></td>'
			code += '    </tr>'
			code += '    <tr class="welcome-tr">'
			code += '      <td class="welcome-td">PAYPAL INTEGRATION (15 SECONDS SETUP)</td>'
			code += '      <td class="welcome-td"><span class="tick">X</span></td>'
			code += '      <td class="welcome-td"><span class="tick">&#10004;</span></td>'
			code += '    </tr>'

			code += '    <tr style="background:#DDD">'
			code += '      <td class="welcome-td">PRINT QUOTE TO PDF</td>'
			code += '      <td class="welcome-td"><span class="tick">X</span></td>'
			code += '      <td class="welcome-td"><span class="tick">&#10004;</span></td>'
			code += '    </tr>'

			code += '  </tbody>'
			code += '</table>'
			code += '</div>'
			code += '</div>'
						jQuery(code, {
							id: 'scc-modal-content-2020-welcome'
						}).appendTo('body');

						var $info = jQuery("#scc-modal-content-2020-welcome")
						$info.dialog({
							'width'         : 600,
							'modal'         : true,
							'autoOpen'      : true,
							'closeOnEscape' : true
						});
						$info.dialog('open')
		})
		}
		*/
	</script>